Source Code
(function($) { $.fn.countdown = function(options) { // default options var defaults = { attrName : 'data-diff', tmpl : '<span class="hour">%{h}</span><span class="minute">%{m}</span>分钟<span class="second">%{s}</span>秒', end : 'has ended', afterEnd : null }; options = $.extend(defaults, options); // trim zero function trimZero(str) { return parseInt(str.replace(/^0/g, '')); } // convert string to time function getDiffTime(str) { var m; if ((m = /^(d{4})[^d]+(d{1,2})[^d]+(d{1,2})s+(d{2})[^d]+(d{1,2})[^d]+(d{1,2})$/.exec(str))) { var year = trimZero(m[1]), month = trimZero(m[2]) - 1, day = trimZero(m[3]), hour = trimZero(m[4]), minute = trimZero(m[5]), second = trimZero(m[6]); return Math.floor((new Date(year, month, day, hour, minute, second).getTime() - new Date().getTime()) / 1000); } return parseInt(str); } // format time function format(diff) { var tmpl = options.tmpl, day, hour, minute, second; day = /%{d}/.test(tmpl) ? Math.floor(diff / 86400) : 0; hour = Math.floor((diff - day * 86400) / 3600); minute = Math.floor((diff - day * 86400 - hour * 3600) / 60); second = diff - day * 86400 - hour * 3600 - minute * 60; tmpl = tmpl.replace(/%{d}/ig, day) .replace(/%{h}/ig, hour) .replace(/%{m}/ig, minute) .replace(/%{s}/ig, second); return tmpl; } // main return this.each(function() { var el = this, diff = getDiffTime($(el).attr(options.attrName)); function update() { if (diff <= 0) { $(el).html(options.end); if (options.afterEnd) { options.afterEnd(); } return; } $(el).html(format(diff)); setTimeout(function() { diff--; update(); }, 1000); } update(); }); }; })(jQuery);
Demo
<html>
<head>
<meta charset="utf-8" />
<title>Countdown Demo</title>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.countdown.js"></script>
<script>
$(function() {
$('.J_countdown1').countdown();
$('.J_countdown2').countdown({
tmpl : '<span>%{d}</span>天<span>%{h}</span>小时<span>%{m}</span>分<span>%{s}</span>秒'
});
$('.J_countdown3').countdown({
tmpl : '<span>%{d}</span>天, <span>%{h}</span>小时, <span>%{m}</span>分, <span>%{s}</span>秒'
});
});
</script>
</head>
<body>
<div class="J_countdown1" data-diff="10"></div>
<div class="J_countdown1" data-diff="70"></div>
<div class="J_countdown1" data-diff="3610"></div>
<div class="J_countdown1" data-diff="86410"></div>
<div class="J_countdown2" data-diff="21234567890"></div>
<div class="J_countdown3" data-diff="21234567890"></div>
</body>
</html>