Final Countdown - Simple Date Countdown Plugin

Final Countdown is a simple, generic, customizable jQuery countdown plugin for the web.

See also:

• 10 Best Countdown JavaScript Plugins

More Examples:

• Basic Example
• Coupon style Example
• Groupon style Example
• Multiple Clocks Example

Basic Usage:

1. Include jQuery library and jQuery Final Countdown Plugin on the page

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.countdown.js"></script>

2. Create a container to hold the countdown clock.

<div id="clock">
</div>

3. Enable the countdown clock, specify the date from which you'd like to countdown, and define the formatter (rendering template) as follows:

$('#clock').countdown('2020/12/25', function(event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
});

4. Config the countdown clock with the following options:

$('#clock').countdown('2020/12/25', {

  // update rate in milliseconds
  precision: 100,

  // allow to continue after finishes
  elapse: false,

  // deferred initialization mode
  defer: false
  
},function(event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
});

5. Event handlers.

/* Event Object: 
{
  type:           '{String} The namespaced event type {update,finish,stop}.countdown',
  strftime:       '{Function} The formatter function',
  finalDate:      '{Date} The parsed final date native object',
  elapsed:        '{bool} Passed away the final date?',
  offset: {
    seconds     : '{int} Seconds left for the next minute',
    minutes     : '{int} Minutes left for the next hour',
    hours       : '{int} Hours left until next day',
    days        : '{int} Days left until next week',
    daysToWeek  : '{int} Days left until next week',
    daysToMonth : '{int} Days left until next month',
    weeks       : '{int} Weeks left until the final date',
    weeksToMonth: '{int} Weeks left until the next month',
    months      : '{int} Months left until final date',
    years       : '{int} Years left until final date',
    totalDays   : '{int} Total amount of days left until final date',
    totalHours  : '{int} Total amount of hours left until final date',
    totalMinutes: '{int} Total amount of minutes left until final date',
    totalSeconds: '{int} Total amount of seconds left until final date'
  }
}
*/
$('#clock').countdown('2020/12/25',function(event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
})
.on('update.countdown', function(event) {
  if (event.elapsed) {
    // Counting up...
  } else {
    // Countdown...
  }
})
.on('finish.countdown', function(event) {
  // do something
})
.on('stop.countdown', function(event) {
  // do something
})

6. API methods.

// Pause
$('#clock').countdown('pause');

// Resume
$('#clock').countdown('resume');

// Stop
$('#clock').countdown('stop');

// Start
$('#clock').countdown('start');

Change logs:

v2.2 (2016-08-05)

• Add formatter to weeks to finish the month and closes

2015-08-15

• Add `daysToWeek` property preparing to deprecate the `days` propo that has the same functionality

v2.0.5 (2015-07-25)

• Fixed bugs.

v2.0.4 (2014-06-04)

• Fix bower tag

v2.0.3 (2014-05-22)

• Update indent to 2 tabs
• Fix linter that wasn't working and update all files
• Bugs fixed.

v2.0.2 (2013-12-13)

• Fix pause/continue crash with one countdown instance
• Add Bower support

v2.0.1 (2013-11-02)

• Add AMD support
• Fix bug that call finish 2sec earlier
• Fix bug when send miliseconds has a string was not parsed
• Add the strftime formatter
• Add support for jQuery callback style
• Add grunt tools
• Better docs and examples

---

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