最も単純な JavaScript カウントダウンコードを共有します (完全なコードが添付されています)。-jsチュートリアル-php.cn

最も単純な JavaScript カウントダウンコードを共有します (完全なコードが添付されています)。

yulia

リリース： 2018-10-15 10:30:54

オリジナル

22920 人が閲覧しました

仕事でページにカウントダウンを設定する必要があることがよくありますが、JS カウントダウンコードの書き方を知っていますか?この記事では、最も単純な JS カウントダウンコードと、詳細なカウントダウン JS コードのアイデアを紹介します。これは一定の参考価値があるため、興味のある友人は参照してください。

例: 期限を設定し、残り時間を表示します。たとえば、もうすぐダブルイレブンが開催され、販売者は JS カウントダウンを使用してアクティビティの終了までの時間を表示できます。具体的なコードは次のとおりです。

HTML 部分:

<body onload = "countTime()">
  <div>
         <span id="day"></span>
         <span id="hour"></span>
         <span id="minute"></span>
         <span id="second"></span>
    </div>
 </body>

ログイン後にコピー

4 つのタグを指定して、残りの日、時間、分、秒を表示します。 JavaScript 部分:

<script type="text/javascript">
  function countTime() {
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截止时间
            var endDate = new Date("2018-10-31 0:0:0");
            var end = endDate.getTime();
            //获取截止时间和当前时间的时间差
            var leftTime = end-now;
            //定义变量 d,h,m,s分别保存天数，小时，分钟，秒
            var d,h,m,s;
            //判断剩余天数，时，分，秒
            if (leftTime>=0) {
                d = Math.floor(leftTime/1000/60/60/24);
                h = Math.floor(leftTime/1000/60/60%24);
                m = Math.floor(leftTime/1000/60%60);
                s = Math.floor(leftTime/1000%60);                   
            }
            //将时间赋值到div中
            document.getElementById("day").innerHTML = d+"天";
            document.getElementById("hour").innerHTML = h+"时";
            document.getElementById("minute").innerHTML = m+"分";
            document.getElementById("second").innerHTML = s+"秒";
            //递归每秒调用countTime方法，显示动态时间效果
            setTimeout(countTime,1000);
 
        }
 </script>

ログイン後にコピー

カウントダウン JS コードのアイデア:

1. date = new Date() を使用して現在時刻を取得します

2. 期限を endDate = new Date に設定します。 ( "2018-10-31 0:0:0")

3. 時差を取得します leftTime = end-now

4. 変数 d、h、m、s を定義して使用します。 if 関数で残りの日、時間、分、秒を判断します。

5. innerHTML を使用して div

6 を再帰的に呼び出して、動的データを表示します。時間効果

効果図に示すように:

上記では、簡単な JS カウントダウンコードを共有し、そのアイデアを説明しました。 JS カウントダウンコードを詳しく説明します。簡単なので、初心者でも試してみて、カウントダウン効果が得られるかどうかを確認してください。最も単純な JavaScript カウントダウンコードを共有します (完全なコードが添付されています)。