Minimal HTML5 Countdown Timer Plugin For jQuery - Rooster

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

<div class="timer" 
     data-rooster-seconds=60 
     data-rooster-onComplete="alert('Timer complete!');">
</div>

2. Load jQuery library and the jQuery Rooster plugin' JavaScript file in the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="rooster/jquery.rooster.js"></script>

3. Initialize the countdown timer.

$('.timer').rooster();

4. Start the countdown timer manually.

$('.timer').rooster('start')

5. All default options.

$('.timer').rooster({
  seconds: 0,
  onComplete: null,
  onStart: null,
  onStop: null,
  includeMinutes: true,
  state: 'idle',
})

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.