Final Countdown - Simple Date Countdown Plugin

Final Countdown - Simple Date Countdown Plugin
File Size: 25.4 KB
Views Total: 20968
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

See also:

More Examples:

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.