Simple jQuery Digital Countdown Timer Plugin

File Size: 26.3KB
Views Total: 17688
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Digital Countdown Timer Plugin

Yet another jQuery timer plugin used to display a digital countdown counter/timer to a given time. It also has the ability to execute a function when the counter is finished. 

How to use it:

1. Include the jQuery library and required timeout interval idle JS library on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.timeout.interval.idle.js" type="text/javascript"></script> 

2. Include jQuery Countdown Timer Plugin's files on the page.

<link rel="stylesheet" href="css/jquery.countdown.timer.css" type="text/css" />
<script src="js/jquery.countdown.counter.js" type="text/javascript"></script> 

3. Create the html for the digital countdown timer.

<div id="counter">
<div id="counter_item1" class="counter_item">
<div class="front"></div>
<div class="digit digit0"></div>
</div>
<div id="counter_item2" class="counter_item">
<div class="front"></div>
<div class="digit digit0"></div>
</div>
<div id="counter_item3" class="counter_item">
<div class="front"></div>
<div class="digit digit_colon"></div>
</div>
<div id="counter_item4" class="counter_item">
<div class="front"></div>
<div class="digit digit0"></div>
</div>
<div id="counter_item5" class="counter_item">
<div class="front"></div>
<div class="digit digit0"></div>
</div>
</div>

4. Initialize the countdown timer.

<script type="text/javascript">
CounterInit(600); // in millisecond. 600 = 10 minutes
</script>

This awesome jQuery plugin is developed by ro31337. For more Advanced Usages, please check the demo page or visit the official website.