写了一个简单的倒计时（countdown）插件，用法非常简单：
$('div.countdown').countdown({seconds: 3,callback: 'helloWorld()'});
上例中，这个插件会在div.countdown中插入3秒钟的倒计时，直到0为止并调用helloWorld()这个函数。
这个插件有两个选项：
- seconds - 从多少秒开始倒计时；
- callback - 可选，倒计时结束时执行的回调函数。
目前的版本是0.2，下载地址如下：
这个插件在jQuery Plugins上的项目站点，觉得好用可以投上一票 ：）。
更新记录：
0.2。加入了stop()方法，可以停止一个正在进行中的倒计时。
嘿嘿
very nice script! It would be better if follows the standard format:
$('#div').countdown('3', function(){});
just my 2c.
thanks
建议搞个加强版..
可以把秒格式成分钟显示的
顶~~~~~~~~~~~~~
//With "clock format": 04:30
window.setTimeout(
function() {
mins = Math.floor(options.seconds/60);
secs = options.seconds - (mins*60);
if (mins.toString().length < 2) {
minsLabel = '0' + mins;
}
else {
minsLabel = mins;
}
if (secs.toString().length < 2) {
secsLabel = '0' + secs;
}
else {
secsLabel = secs;
}
jQuery(obj).html(String(minsLabel+':'+secsLabel));
--options.seconds;
jQuery(obj).countdown(options);
}
, 1000
);
Thanks!!
A mod for you.
//Display time in mins secs format :)
/**
* recursive countdown
*/
window.setTimeout(
function() {
mins = Math.floor(mins_prep/60);
secs = mins_prep - (mins*60);
jQuery(obj).html(String(mins+' mins '+secs+' secs'));
--options.seconds;
jQuery(obj).countdown(options);
}
, 1000
);
Woops typos in last post [emoticon:emu]
//Display time in mins secs format :)
/**
* recursive countdown
*/
window.setTimeout(
function() {
mins = Math.floor(options.seconds/60);
secs = options.seconds - (mins*60);
jQuery(obj).html(String(mins+' mins '+secs+' secs'));
--options.seconds;
jQuery(obj).countdown(options);
}
, 1000
);
@Trent: thanks for the submit! [emoticon:smile_1]
To become able and be more flexible in formating, I've added a format_function callback.
/**
* recursive countdown
*/
window.setTimeout(
function() {
if( options.format_function ) {
jQuery(obj).html( options.format_function( options.seconds ) );
} else {
jQuery(obj).html(String(options.seconds));
}
--options.seconds;
jQuery(obj).countdown( options );
}
, 1000
);
Hey,
Nice plugin, thanks!
Here is a modified version that displays countdown in HH:MM:SS format:
jQuery.fn.CountDown = function(options) {
/**
* app init
*/
if(!options) options = '()';
if(jQuery(this).length == 0) return false;
var obj = this;
if (!options.digits || options.digits < 0 || options.seconds == 'undefined')
{
if(options.callback) eval(options.callback);
return null;
}
/**
* add leading zeros to number
*/
function pad_digits(nb, totalDigits) {
nb = nb.toString();
var pd = '';
if (totalDigits > nb.length)
for (i=0; i < (totalDigits - nb.length); i++)
pd += '0';
return pd + nb.toString();
};
/**
* recursive countdown
*/
window.setTimeout(
function() {
jQuery(obj).html(String(pad_digits(options.hours, options.digits) + ' : ' + pad_digits(options.minutes, options.digits) + ' : ' + pad_digits(options.seconds, options.digits)));
options.seconds -= 1 ;
if (options.seconds < 0) {
options.seconds = 59;
options.minutes -= 1;
if (options.minutes < 0) {
options.minutes = 59;
options.hours -= 1;
if (options.hours < 0) {
options.hours = 23;
}
}
}
jQuery(obj).CountDown(options);
}
, 1000
);
/**
* return null
*/
return this;
}
Simple usage:
$('#countdown').CountDown({hours:3, minutes:38, seconds:15, digits:2});
这个插件如何，xhtml代码很简单：
4
jQuery代码：
;(function($) {
$.fn.timer = function(callback) {
var _this = this,
oldTimer = _this.text(),
timer = oldTimer;
var id = setInterval(function() {
timer--;
if(timer == 0) {
clearInterval(id);
};
_this.text(timer);
}, 1000);
setTimeout(function() {
if(callback) {
callback();
};
}, oldTimer*1000);
};
})(jQuery);
jQuery(function($) {
$('label').timer(function() {
alert('倒计时结束');
});
});
欢迎回访我的博客，给我提点意见啊！！
@hiro 看了你的网站，头部的鼠标效果很有意思 [emoticon:clin_oeil]