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

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.