jquery countdown插件的施用

2012-10-24

jquery countdown插件的使用源代码注释：jQuery.fn.countDown function(settings,to) {if(!to && to ! s

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

热点排行

Web前端

jquery countdown插件的施用