jquery实现倒计时功能

前端技术 2023/09/09 JavaScript

本文实例为大家分享了jquery倒计时功能的实现代码，供大家参考，具体内容如下

定义和用法：

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
下面举例

<html>
 <head>
  <meta charset=\"utf-8\">
  <title>jquery简单倒计时</title>
  </style>
  <script type=\"text/javascript\" src=\"js/jquery.min.js\"></script>
  <script type=\"text/javascript\">
 
   var intDiff = parseInt(60);//倒计时总秒数量
 
   function timer(intDiff) {
    window.setInterval(function() {
     var day = 0,
       hour = 0,
       minute = 0,
       second = 0;//时间默认值  
     if (intDiff > 0) {
      day = Math.floor(intDiff / (60 * 60 * 24));
      hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
      minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
      second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
     }
     if (minute <= 9)
      minute = \'0\' + minute;
     if (second <= 9)
      second = \'0\' + second;
     $(\'#day_show\').html(day + \"天\");
     $(\'#hour_show\').html(\'<s id=\"h\"></s>\' + hour + \'时\');
     $(\'#minute_show\').html(\'<s></s>\' + minute + \'分\');
     $(\'#second_show\').html(\'<s></s>\' + second + \'秒\');
     intDiff--;
    }, 1000);
   }
 
   $(function() {
    timer(intDiff);
   });
  </script>
 </head>
 <body>
  <h1>网页上的倒计时</h1>
  <div class=\"time-item\">
   <span id=\"day_show\">0天</span>
   <strong id=\"hour_show\">0时</strong>
   <strong id=\"minute_show\">0分</strong>
   <strong id=\"second_show\">0秒</strong>
  </div>
  <!--倒计时模块-->
 </body>
</html>

希望本文所述对大家学习jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/23922

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案