jQuery Fengyuan Chen Countdown Plugin Demos

Initialize with countdown attribute

Basic

HTML:

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

Demo:

Dec 31 2015 23:59:59

Add options with data-* attribute

HTML:

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

Demo:

Dec 31 2015 23:59:59

Initialize with $.fn.countdown method

Basic

HTML:

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

Javascript:

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

Demo:

Dec 31 2015 23:59:59

Add options

HTML:

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

Javascript:

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

Demo:

Methods

Usage

HTML:

<p id="countdown-methods">Jan 1 2015 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 2015 00:00:00

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 2015 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

Customize text

HTML:

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

Demo:

Dec 25 2015 00:00:00

I18n - zh-CN

HTML:

<p countdown data-date="Dec 25 2015" 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: