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>