search

Home  >  Article  >  Web Front-end  >  jquery implements countdown function_jquery

jquery implements countdown function_jquery

WBOY
WBOYOriginal
2016-05-16 15:23:121560browse

Definition and usage

The setInterval() method can call a function or calculate an expression according to the specified period (in milliseconds).

The setInterval() method will keep calling the function until clearInterval() is called or the window is closed. The ID value returned by setInterval() can be used as an argument to the clearInterval() method.
Example below 

<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>

I hope this article will be helpful to everyone learning jquery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to convert js timestamp to date formatNext article：How to convert js timestamp to date format

Related articles

See more