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

Just another jQuery countdown plugin which allows you to countdown in seconds, minutes, hours, days and years to a target date/time.
How to use it:
1. Include jQuery library and the jQuery countdown plugin in the document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="src/countdown.js"></script>
2. Create the Html for a countdown timer.
<div class="countdown_dashboard"> <div class="dash year_dash"> <span class="dash_title">years</span> <div class="digit">0</div> <div class="digit">0</div> <div class="digit">0</div> <div class="digit">0</div> </div> <div class="dash day_dash"> <span class="dash_title">days</span> <div class="digit">0</div> <div class="digit">0</div> <div class="digit">0</div> </div> <div class="dash hour_dash"> <span class="dash_title">hrs</span> <div class="digit">0</div> <div class="digit">0</div> </div> <div class="dash min_dash"> <span class="dash_title">min</span> <div class="digit">0</div> <div class="digit">0</div> </div> <div class="dash sec_dash"> <span class="dash_title">sec</span> <div class="digit">0</div> <div class="digit">0</div> </div> </div>
3. Call the plugin and set the date/time you wish to countdown to.
$('.countdown_dashboard').countdown({ diff: 60 // 60 seconds });
4. Options and defaults.
$('.countdown_dashboard').countdown({ diff: null, year: 0, month: 0, day: 0, hour: 1, min: 1, sec: 1, refresh: 1000, easing: 'linear', dash: [ {key: 'year', duration: 950}, {key: 'day', duration: 950}, {key: 'hour', duration: 950}, {key: 'min', duration: 950}, {key: 'sec', duration: 750} ], // you may provide callback capabilities onEnd: $.noop });
This awesome jQuery plugin is developed by amibug. For more Advanced Usages, please check the demo page or visit the official website.