jqueryはカウントダウン関数を実装します_jquery

WBOY
リリース: 2016-05-16 15:23:12
オリジナル
1544 人が閲覧しました

定義と使用法

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 プログラミングを学習するすべての人に役立つことを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート