Countdown

A jQuery countdown plugin.

• Documentation

Getting started

Installation

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/countdown.js"></script>

Usage

Initialize with countdown and data-* attributes

Basic

<span countdown>Feb 02 2020 20:20:22</span>

Add options with data-* attribute

<span countdown data-date="Feb 02 2020 20:20:22"></span>

Initialize with $.fn.countdown method

Basic

<span class="countdown">Feb 02 2020 20:20:22</span>

$(".countdown").countdown();

Add options

<span class="countdown"></span>

$(".countdown").countdown({
    date: new Date(2020, 1, 2, 20, 20, 22)
});

Options

Setup with $("#target").countdown(options), or global setup with $.fn.countdown.setDefaults(options).

autoStart

• type: boolean
• default: true

Auto start the countdown when initialized.

date

• type: object / number / string
• default: null

The target date, allow date object, time number (milliseconds) and valid date string.

fast

• type: boolean
• default: false

Set it to true to update the date number per one tenth second.

end

• type: function
• default: function() {}

The function will be run when the countdown end.

text

• type: string
• default: "%d days, %h hours, %m minutes, %s seconds"

Just a text template, you can customize it, e.g., "%d D / %h H / %m M / %s S" or "%m min / %s sec" .

pad

• type: boolean
• default: false

Set it to true to pad numbers with a leading 0, e.g., "10 H / 9 M / 5 S" becomes "10 H / 09 M / 05 S"

Methods

start

• Start the countdown.
• Usage: $().countdown("start").

stop

• Stop the countdown
• Usage: $().countdown("stop").

end

• End the countdown
• Usage: $().countdown("end").

destroy

-Destroy the countdown

• Usage: $().countdown("destroy").

Customize

Add data-* attribute to time number wrapper in the target container, then the time numbers will be updated when time change.

For example:

<div countdown data-date="Feb 02 2020 20:20:22">
    <span data-days>0</span> days
    <span data-hours>0</span> hours
    <span data-minutes>0</span> minutes
    <span data-seconds>0</span> seconds
</div>

Browser Support

• IE 6+
• Chrome 33+
• Firefox 27+
• Safari 5.1+
• Opera 19+

As a jQuery plugin, you can reference to the jQuery Browser Support.

License

Released under the MIT license.