今天根据项目需要,简单写了一个基于jquery,实现类似于淘宝手机验证倒计时的功能的函数,代码如下:
/**
* 倒计时按钮
*
* @param object options 参数示例:{count:int, btn:obj, ext_text:str, fresh_text:str, callback:fun}
*/
function doTimeoutCount(options){
// 记录按钮上文字原有的color
var old_color = options.btn.css('color');
// 如果没有设置计时结束后在按钮上显示的文字,则使用原有的文字
if (typeof(options.fresh_text) === 'undefined'){
options.fresh_text = options.btn.val();
}
// 修改文字内容及色彩,同时禁用按钮点击
options.btn.attr('disabled', true).val(options.count + options.ext_text).css('color', 'gray');
// setTimeout返回的事件句柄
var handle = setInterval(count_down, 1000);
// 在每个周期中要执行的操作
function count_down(){
if (--options.count > 0){
options.btn.val(options.count + options.ext_text);
}else{
clearInterval(handle);
options.btn.attr('disabled', false).val(options.fresh_text).css('color', old_color);
if (typeof(options.callback) !== 'undefined'){
options.callback();
}
}
}
}
参数说明:该函数接受一个对象作为设置参数,对象属性包括:
count:倒计时的秒数
btn:一个input button对像
ext_text:在显示的秒数后面要附加的说明性文字
fresh_text:倒计时结束,刷新按钮属性时,要显示的文字,可以不设置,默认使用按钮最初的名字
callback:倒计时结束要执行的函数,也可以不设置