这个倒计时的构思比较巧妙,呵呵,我自认为的。
计时调用 通过jquery的animate()方法。
计时停止 通过jquery的stop()方法。
而重新开始计时则使用了 jquery的data()方法记录一些变量,使之重新开始。
Demo:
http://cssrain.cn/demo/timecount.html
源代码注释:
jQuery.fn.countDown = function(settings,to) {
if(!to && to != settings.endNumber) { to = settings.startNumber; }
this.data("CR_currentTime",to);
$(this).text(to).animate({"none":"none"},settings.duration,'',function() {
if(to > settings.endNumber + 1) {
$(this).countDown(settings,to - 1);
}else{
settings.callBack(this);
}
});
return this;
};
//计时&&重新计时
jQuery.fn.CRcountDown = function(settings) {
settings = jQuery.extend({
startNumber: 10,
endNumber: 0,
duration: 1000,
callBack: function() { }
}, settings);
this.data("CR_duration",settings.duration);
this.data("CR_endNumber",settings.endNumber);
this.data("CR_callBack",settings.callBack);
return this.stop().countDown(settings);
};
//计时暂停
jQuery.fn.pause = function(settings) {
return this.stop();
};
//暂停后,重新开始
jQuery.fn.reStart = function() {
return this.pause().CRcountDown({
startNumber : this.data("CR_currentTime"),
duration : this.data("CR_duration"),
endNumber : this.data("CR_endNumber"),
callBack : this.data("CR_callBack")
});
};
使用方法:
// 开始 && 重新开始
$("#start").click(function(){
$("#test").CRcountDown({
startNumber:15,
callBack:test
})
.css("color","red");
});
// 暂停
$("#pause").click(function(){
$("#test").pause();
});
// 暂停后 重新开始
$("#again").click(function(){
$("#test").reStart();
});
function test(){
$("<p>计时1结束!</p>")
.hide()
.fadeIn(1000)
.appendTo("body");
}
计时调用 通过jquery的animate()方法。
计时停止 通过jquery的stop()方法。
而重新开始计时则使用了 jquery的data()方法记录一些变量,使之重新开始。
Demo:
http://cssrain.cn/demo/timecount.html
源代码注释:
jQuery.fn.countDown = function(settings,to) {
if(!to && to != settings.endNumber) { to = settings.startNumber; }
this.data("CR_currentTime",to);
$(this).text(to).animate({"none":"none"},settings.duration,'',function() {
if(to > settings.endNumber + 1) {
$(this).countDown(settings,to - 1);
}else{
settings.callBack(this);
}
});
return this;
};
//计时&&重新计时
jQuery.fn.CRcountDown = function(settings) {
settings = jQuery.extend({
startNumber: 10,
endNumber: 0,
duration: 1000,
callBack: function() { }
}, settings);
this.data("CR_duration",settings.duration);
this.data("CR_endNumber",settings.endNumber);
this.data("CR_callBack",settings.callBack);
return this.stop().countDown(settings);
};
//计时暂停
jQuery.fn.pause = function(settings) {
return this.stop();
};
//暂停后,重新开始
jQuery.fn.reStart = function() {
return this.pause().CRcountDown({
startNumber : this.data("CR_currentTime"),
duration : this.data("CR_duration"),
endNumber : this.data("CR_endNumber"),
callBack : this.data("CR_callBack")
});
};
使用方法:
// 开始 && 重新开始
$("#start").click(function(){
$("#test").CRcountDown({
startNumber:15,
callBack:test
})
.css("color","red");
});
// 暂停
$("#pause").click(function(){
$("#test").pause();
});
// 暂停后 重新开始
$("#again").click(function(){
$("#test").reStart();
});
function test(){
$("<p>计时1结束!</p>")
.hide()
.fadeIn(1000)
.appendTo("body");
}