recherche

Maison >interface Web >js tutoriel >jquery implémente le compte à rebours function_jquery

jquery implémente le compte à rebours function_jquery

WBOY
WBOYoriginal
2016-05-16 15:23:121593parcourir

Définition et usage

La méthode setInterval() peut appeler une fonction ou calculer une expression selon la période spécifiée (en millisecondes).

La méthode setInterval() continuera d'appeler la fonction jusqu'à ce que clearInterval() soit appelée ou que la fenêtre soit fermée. La valeur ID renvoyée par setInterval() peut être utilisée comme argument de la méthode clearInterval().
Exemple ci-dessous 

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

J'espère que cet article sera utile à tous ceux qui apprennent la programmation jquery.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment convertir l'horodatage js au format de dateArticle suivant：Comment convertir l'horodatage js au format de date

Articles Liés

Voir plus