This time I will share jQuery Plugin and tutorial about Minimal HTML5 Countdown Timer Plugin For jQuery – Rooster, hope it will help you in programming stack.
Just another jQuery dependent countdown timer with callback support that has the ability to auto pause when the current page loses focus.
How to use it:
1. Create a timer container with the following HTML5 data attributes:
- data-rooster-seconds: the time in seconds to countdown from
- data-rooster-onComplete: executed when the countdown timer is completed
- data-rooster-onstart: executed when starting the countdown timer
- data-rooster-onstop: executed when stoping the countdown timer
2 |
data-rooster-seconds=60 |
3 |
data-rooster-onComplete="alert('Timer complete!');"> |
2. Load jQuery library and the jQuery Rooster plugin’ JavaScript file in the html page.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="rooster/jquery.rooster.js"></script> |
3. Initialize the countdown timer.
4. Start the countdown timer manually.
1 |
$('.timer').rooster('start') |
5. All default options.
Change log:
2016-08-19
- Add the ability to include or exclude minutes from the timer
This awesome jQuery plugin is developed by mhotwagner. For more Advanced Usages, please check the demo page or visit the official website.
