当前位置： 文江博客话题详情

jquery倒计时插件

发布于 2022-09-05 01:40:27 字数 7388 浏览 7 评论 0

Html页面的调用方法代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title><!--http://www.cssrain.cn/demo/jquery-ui-tab/jquery-1.3.1.js-->
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <script src="jquery-1.4.2.js" type="text/javascript"></script>
  7. <script src="time.js" type="text/javascript"></script>
  8. <script>
  9. $(function(){
  10. /*****  测试1  ****/
  11. // 开始 && 重新开始
  12. $("#start").click(function(){
  13.         $("#test").CRcountDown({
  14.                                 startNumber:15,
  15.                                 callBack:test
  16.                         })
  17.                         .css("color","red");
  18. });
  19. // 暂停
  20. $("#pause").click(function(){
  21.         $("#test").pause();
  22. });
  23. // 暂停后 重新开始
  24. $("#again").click(function(){
  25.         $("#test").reStart();
  26. });
  27. function test(){
  28.         $("<p>1</p>")
  29.                           .hide()
  30.                           .fadeIn(1000)
  31.                           .appendTo("body");
  32. }
  34. /*****  测试2  ****/
  35. // 开始 && 重新开始
  36. $("#start2").click(function(){
  37.         $("#test2").CRcountDown({
  38.                                 startNumber:10,
  39.                                 callBack:test2
  40.                         })
  41.                         .css("color","blue");
  42. });
  43. // 暂停
  44. $("#pause2").click(function(){
  45.         $("#test2").pause();
  46. });
  47. // 暂停后 重新开始
  48. $("#again2").click(function(){
  49.         $("#test2").reStart();
  50. });
  51. function test2(){
  52.         $("<p>2</p>")
  53.                           .hide()
  54.                           .fadeIn(1000)
  55.                           .appendTo("body");
  56. }
  58. })
  59. </script>
  60. </head>
  61. <body>
  62. <h1>测试1：</h1>
  63. <button id="start" >开始&&重新开始</button>
  64. <button id="pause" >暂停</button>
  65. <button id="again" >暂停后 重新开始</button>
  66. <div id="test" ></div>
  68. <br/>
  69. <h1>测试2：</h1>
  70. <button id="start2" >开始&&重新开始</button>
  71. <button id="pause2" >暂停</button>
  72. <button id="again2" >暂停后 重新开始</button>
  73. <div id="test2" ></div>
  75. <br/><br/>
  76. Dev by cssrain
  79. </body>
  80. </html>

复制代码time.js的代码:

  1. $(function(){
  2. jQuery.fn.countDown = function(settings,to) {
  3.         if(!to && to != settings.endNumber) { to = settings.startNumber; }
  4.         this.data("CR_currentTime",to);
  5.         $(this).text(to).animate({"none":"none"},settings.duration,'',function() {
  6.                 if(to > settings.endNumber + 1) {
  7.                         $(this).countDown(settings,to - 1);
  8.                 }else{
  9.                         settings.callBack(this);
  10.                 }
  11.         });               
  12.         return this;
  13. };
  14. //计时&&重新计时
  15. jQuery.fn.CRcountDown = function(settings) {
  16.         settings = jQuery.extend({
  17.                 startNumber: 10,
  18.                 endNumber: 0,
  19.                 duration: 1000,
  20.                 callBack: function() { }
  21.         }, settings);
  22.         this.data("CR_duration",settings.duration);
  23.         this.data("CR_endNumber",settings.endNumber);
  24.         this.data("CR_callBack",settings.callBack);
  25.         return this.stop().countDown(settings);
  26. };
  27. //计时暂停
  28. jQuery.fn.pause = function(settings) {
  29.         return this.stop();
  30. };
  31. //暂停后，重新开始
  32. jQuery.fn.reStart = function() {
  33.         return this.pause().CRcountDown({
  34.                 startNumber : this.data("CR_currentTime"),
  35.                 duration :         this.data("CR_duration"),
  36.                 endNumber : this.data("CR_endNumber"),
  37.                 callBack : this.data("CR_callBack")
  38.         });
  39. };
  41. })

复制代码

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

柠檬

暂无简介

文章
评论
737 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

琉璃梦幻

文章 0 评论 0

qq_4zWU6L

文章 0 评论 0

话少情深

文章 0 评论 0

西西弗的石头怪

文章 0 评论 0

彻夜缠绵

文章 0 评论 0

千寻…

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文