This time I will share jQuery Plugin and tutorial about Simple Countdown Timer Plugin With jQuery – simple.timer.js, hope it will help you in programming stack.
simple.timer.js is a simple jQuery countdown timer plugin with the ability to execute a callback function for custom behavior on timeout.
How to use it:
1. Link to the necessary jQuery library and jquery.simple.timer.js.
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"></script> |
4 |
<script src="jquery.simple.timer.js"></script> |
2. Create an element for the countdown timer and specify the duration in minutes and/or seconds in the data attribute:
1 |
<h1 class='timer' data-minutes-left=1></h1> |
2 |
<h1 class='timer' data-seconds-left=30></h1> |
3. The JavaScript to start the countdown timer.
1 |
$('.timer').startTimer(); |
4. Execute a function when the countdown timer is completely finished.
1 |
$('.timer').startTimer({ |
2 |
onComplete: function(element){ |
5. The default CSS classes that enables you to style the countdown timer in the CSS.
1 |
$('.timer').startTimer({ |
3 |
hours: 'myClass-hours', |
4 |
minutes: 'myClass-minutes', |
5 |
seconds: 'myClass-seconds', |
6 |
clearDiv: 'myClass-clearDiv', |
7 |
timeout: 'myClass-timeout' |
6. In some cases you might need a loop countdown timer.
1 |
$('.timer').startTimer({ |
Changelog:
2019-07-23
- Pass onComplete upon resume event.
2018-10-31
- Possibility to configure the created element for hours, minutes and seconds.
This awesome jQuery plugin is developed by caike. For more Advanced Usages, please check the demo page or visit the official website.
