Countdown v0.1.0

A simple 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 attribute

Basic

HTML:

<p countdown>Dec 31 2020 23:59:59</p>

Demo:

Dec 31 2020 23:59:59

Add options with data-* attribute

HTML:

<p countdown data-fast="true">Dec 31 2020 23:59:59</p>

Demo:

Dec 31 2020 23:59:59

Initialize with $.fn.countdown method

Basic

HTML:

<p class="countdown">Dec 31 2020 23:59:59</p>

Javascript:

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

Demo:

Dec 31 2020 23:59:59

Add options

HTML:

<p id="countdown-add-options"></p>

Javascript:

$("#countdown-add-options").countdown({
  date: new Date(2020, 11, 31)
});

Demo:

Options

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

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-fast="true".

Name Type Default Description
autoStart boolean true Auto start the countdown when initialized.
date object / number / string null The target date, allow date object, time number (milliseconds), valid date string.
fast boolean false Set it `true` to update the date number per one tenth second.
end function function() {} The function will be run when the countdown end.
text string "%s days, %s hours, %s minutes, %s seconds" Just a text template, you can customize it, e.g., "%s D / %s H / %s M / %s S".

Methods

Methods

Usage

HTML:

<p id="countdown-methods">Jan 1 2020 00:00:00</p>
<button id="countdown-start">Start</button>
<button id="countdown-stop">Stop</button>
<button id="countdown-end" class="btn btn-success">End</button>
<button id="countdown-destroy" class="btn btn-danger">Destroy</button>

JavaScript:

var $countdownMethods = $("#countdown-methods");

$countdownMethods.countdown({
  autoStart: false
});

$("#countdown-start").click(function() {
  $countdownMethods.countdown("start");
});

$("#countdown-stop").click(function() {
  $countdownMethods.countdown("stop");
});

$("#countdown-end").click(function() {
  $countdownMethods.countdown("end");
});

$("#countdown-destroy").click(function() {
  $countdownMethods.countdown("destroy");
});

Demo:

Jan 1 2020 00:00:00

Customize

Customize content, layout, style by add data-* attribute to the children of countdown container. For example:

HTML:

<div class="countdown" countdown data-date="Jan 1 2017 00:00:00">
  <span data-heading>New Year Countdown</span>
  <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>

Demo:

New Year Countdown 0days 0hours 0minutes 0seconds

More demos

Customize text

HTML:

<p countdown data-text="Christmas Day Countdown: %s Days / %s Hours / %s Minutes / %s Seconds">Dec 25 2020 00:00:00</p>

Demo:

Dec 25 2020 00:00:00

I18n - zh-CN

HTML:

<p countdown data-date="Dec 25 2016" data-text="圣诞节倒计时：%s 天 %s 时 %s 分 %s 秒"></p>

Demo:

Change view with end function

HTML:

<p id="countdown-option-end"></p>

JavaScript:

var $countdownOptionEnd = $("#countdown-option-end");

$countdownOptionEnd.countdown({
  date: (new Date()).getTime() + 60 * 1000, // 1 minute later
  fast: true,
  end: function() {
    $countdownOptionEnd.text("Countdown end!");
  }
});

Demo: