countdown
attributeHTML:
<p countdown>Dec 31 2015 23:59:59</p>
Demo:
Dec 31 2015 23:59:59
data-*
attributeHTML:
<p countdown data-fast="true">Dec 31 2015 23:59:59</p>
Demo:
Dec 31 2015 23:59:59
$.fn.countdown
methodHTML:
<p class="countdown">Dec 31 2015 23:59:59</p>
Javascript:
$(".countdown").countdown();
Demo:
Dec 31 2015 23:59:59
HTML:
<p id="countdown-add-options"></p>
Javascript:
$("#countdown-add-options").countdown({ date: new Date(2015, 11, 31) });
Demo:
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:
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
HTML:
<p countdown data-date="Dec 25 2015" data-text="圣诞节倒计时:%s 天 %s 时 %s 分 %s 秒"></p>
Demo:
end
functionHTML:
<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: