suchen

Heim >Web-Frontend >js-Tutorial >jquery implementiert die Countdown-Funktion_jquery

jquery implementiert die Countdown-Funktion_jquery

WBOY
WBOYOriginal
2016-05-16 15:23:121574Durchsuche

Definition und Verwendung

Die Methode setInterval() kann eine Funktion aufrufen oder einen Ausdruck entsprechend dem angegebenen Zeitraum (in Millisekunden) berechnen.

Die setInterval()-Methode ruft die Funktion so lange auf, bis clearInterval() aufgerufen oder das Fenster geschlossen wird. Der von setInterval() zurückgegebene ID-Wert kann als Argument für die Methode clearInterval() verwendet werden.
Beispiel unten 

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

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die die JQuery-Programmierung erlernen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So konvertieren Sie den JS-Zeitstempel in das DatumsformatNächster Artikel：So konvertieren Sie den JS-Zeitstempel in das Datumsformat

In Verbindung stehende Artikel

Mehr sehen