源代码注释:
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 倒计时
- 2.zip (34.3 KB)
- 下载次数: 129
分享到:
相关推荐
jQuery 的 countdown 插件:该插件提供了丰富的倒计时功能,包括自定义样式、自动更新等 https://github.com/lafitewu/countDown
倒计时 jquery countdown 多种样式,非常漂亮
jquery.countdown倒计时插件下载_翻牌倒计时器特效 jquery.countdown倒计时插件下载_翻牌倒计时器特效 jquery.countdown倒计时插件下载_翻牌倒计时器特效
jquery 倒计时插件和实例,jCountr——运用了jQuery.Countdown.js,结合 jquery.js而完成的倒计时效果,用法请看代码,不是太复杂。
jQuery.countdown是一款功能齐全的jQuery倒计时插件。jQuery.countdown.js一个文件中集合了所有的倒计时功能,它能够显示各种时间格式,并提供回调函数。
jquery.countdown.js网页倒计时插件制作倒计时 jquery.countdown.js网页倒计时插件制作倒计时 jquery.countdown.js网页倒计时插件制作倒计时
jQuery+countdown插件实现的自定义倒计时特效源码.zip
jQuery自定义倒计时插件countdown是一款基于jquery.countdown.js插件实现的倒计时特效代码。
1. 需要先加载countdown插件对应的css文件,也就几行代码而已,可以不用引入,自己手写一样啦 <head> <meta charset=UTF-8> <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 /> ...
jQuery Countdown是一个具有惊人动画的倒计时库。 看看 现在,您可以在下载PSD文件。 基本用法: $ ( '#counter' ) . countdown ( { startTime : "01:12:32:55" } ) ; 完整用法: $ ( '#counter' ) . countdown ...
CountDown-jQuery-插件 CountDown-jQuery-插件 #设置倒计时的方法####启动倒数 jQuery(document).ready(function() { $('#countdown_dashboard').countDown({ targetOffset: { 'day': 0, 'month': 0, ...
jQuery自定义倒计时插件countdown是一款基于jquery.countdown.js插件实现的倒计时特效代码。
一款基于jquery.countdown.js插件实现的jQuery自定义网页倒计时代码,带有动画效果,样式有点普通,稍微美化一下还是不错的。
jQuery数字滚动倒计时插件 jQuery Countdown Timer
jQuery CountDown Plugin Example源代码,实现一个数字倒数功能,从10倒数到9,带有数字由大变小的放大缩小动画效果,倒计时、倒数插件,请关注一下jQuery CountDown哦。有兴趣的看截图。 运行环境:HTML/PHP/ASP/
jQuery.countdown是一款功能齐全的jQuery倒计时插件。jQuery.countdown.js一个文件中集合了所有的倒计时功能,它能够显示各种时间格式,并提供回调函数。
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!