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 倒计时

?