博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jQuery插件---倒计时。

Posted on 2009-04-15 09:06  linFen  阅读(1568)  评论(0编辑  收藏  举报
这个倒计时的构思比较巧妙,呵呵,我自认为的。
计时调用 通过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");
}