Simple Slick jQuery Countdown Timer Plugin

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

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.