Skip to content

Latest commit

 

History

History
172 lines (96 loc) · 2.78 KB

README.md

File metadata and controls

172 lines (96 loc) · 2.78 KB
Raw

Countdown

A jQuery countdown plugin.

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.