jquery countdown插件的使用

源代码注释：
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插件-倒计时    
      rated 3.33 by 3 people [?]


You might like:
关于jQuery的动画制作 | fengfenye
搞笑爱情有声小说《赵赶驴电梯奇遇记》[15集全/MP3] | fengfenye
손담비 / Type B
2 more recommended posts »

2009-03-24    jQuery&js&CSS
这个倒计时的构思比较巧妙，呵呵，我自认为的。
计时调用 通过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");
}

2 ，jquery 倒计时插件(刷新保持计时状态)
用到jquery的cookie插件。感谢农民的升级。
下载地址：http://jquerylab.googlecode.com/files/2.rar

cssrain前端技术







Tag: jQuery 倒计时