锁定老帖子 主题:jquery倒计时插件
精华帖 (0) :: 良好帖 (1) :: 新手帖 (1) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-10-15
调用方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title><!--http://www.cssrain.cn/demo/jquery-ui-tab/jquery-1.3.1.js--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="time.js" type="text/javascript"></script> <script> $(function(){ /***** 测试1 ****/ // 开始 && 重新开始 $("#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 ****/ // 开始 && 重新开始 $("#start2").click(function(){ $("#test2").CRcountDown({ startNumber:10, callBack:test2 }) .css("color","blue"); }); // 暂停 $("#pause2").click(function(){ $("#test2").pause(); }); // 暂停后 重新开始 $("#again2").click(function(){ $("#test2").reStart(); }); function test2(){ $("<p>2</p>") .hide() .fadeIn(1000) .appendTo("body"); } }) </script> </head> <body> <h1>测试1:</h1> <button id="start" >开始&&重新开始</button> <button id="pause" >暂停</button> <button id="again" >暂停后 重新开始</button> <div id="test" ></div> <br/> <h1>测试2:</h1> <button id="start2" >开始&&重新开始</button> <button id="pause2" >暂停</button> <button id="again2" >暂停后 重新开始</button> <div id="test2" ></div> <br/><br/> Dev by cssrain </body> </html>
time.js的代码: $(function(){ 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") }); }; })
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-10-15
感觉挺实用的
|
|
返回顶楼 | |
发表时间:2010-10-15
挺有意思,不错的
|
|
返回顶楼 | |
发表时间:2010-10-18
不错,,受你思路的启发,我做了一个可以按指定日期倒计时的插件
|
|
返回顶楼 | |
发表时间:2010-10-19
NumbCoder 写道 不错,,受你思路的启发,我做了一个可以按指定日期倒计时的插件
谢谢你对我的关注,是否可以把你的按指定日期倒计时的插件也发表出来分享一下啊,你的指定日期的插件? 倒计时时是否可以按照指定格式倒计时吗 比如从某个时间或者年月日的基础上倒计时 HH:mm:ss格式的倒计时 或者 yyyy-MM-dd HH:mm:ss 可以这样吗,或者只是倒计时一个整数而已? 希望能拿出来分享一下,这样我相信我们都会有所提高 |
|
返回顶楼 | |
发表时间:2010-10-20
乌托邦之爱 写道 NumbCoder 写道 不错,,受你思路的启发,我做了一个可以按指定日期倒计时的插件
谢谢你对我的关注,是否可以把你的按指定日期倒计时的插件也发表出来分享一下啊,你的指定日期的插件? 倒计时时是否可以按照指定格式倒计时吗 比如从某个时间或者年月日的基础上倒计时 HH:mm:ss格式的倒计时 或者 yyyy-MM-dd HH:mm:ss 可以这样吗,或者只是倒计时一个整数而已? 希望能拿出来分享一下,这样我相信我们都会有所提高 自己改了一下.按日期时间,到计时. |
|
返回顶楼 | |
发表时间:2010-10-20
这两个插件都收了,不错,多谢
|
|
返回顶楼 | |
发表时间:2010-10-20
zhaobohao 写道 乌托邦之爱 写道 NumbCoder 写道 不错,,受你思路的启发,我做了一个可以按指定日期倒计时的插件
谢谢你对我的关注,是否可以把你的按指定日期倒计时的插件也发表出来分享一下啊,你的指定日期的插件? 倒计时时是否可以按照指定格式倒计时吗 比如从某个时间或者年月日的基础上倒计时 HH:mm:ss格式的倒计时 或者 yyyy-MM-dd HH:mm:ss 可以这样吗,或者只是倒计时一个整数而已? 希望能拿出来分享一下,这样我相信我们都会有所提高 自己改了一下.按日期时间,到计时. 太帅了 高手 果然不同凡响 |
|
返回顶楼 | |
发表时间:2010-10-20
暂时没发现什么用处,不过挺不错的~
|
|
返回顶楼 | |
发表时间:2010-10-21
什么都jquery..插件...
|
|
返回顶楼 | |