JSで分カウントダウンを実装する方法（10分カウントダウンの例）-jsチュートリアル-php.cn

JSで分カウントダウンを実装する方法（10分カウントダウンの例）

yulia

リリース： 2018-10-17 17:20:30

オリジナル

21033 人が閲覧しました

職場ではページにカウントダウンを設定する必要がよくありますが、JS で分のカウントダウンを実装する方法をご存知ですか?この記事では、JS の 10 分間カウントダウンコードを紹介します。興味のある方はぜひご覧ください。

JS カウントダウンコードを記述するには、if 関数、Math.floor、タイマー setInterval など、多くの JavaScript の知識が必要です。不明な場合は、PHP 中国語 Web サイトの関連記事を参照してください。または、JavaScript ビデオチュートリアルにアクセスしてください。

例: 10 分間の試験のカウントダウン。残り 5 分になると、試験時間が残り 5 分であることを通知します。試験は終わりました。具体的なコードは次のとおりです。

HTML 部分:

<body>
  <div id="timer"></div>
  <div id="warring"></div>
</body>

ログイン後にコピー

JavaScript 部分:

<script type="text/javascript">
  var maxtime = 10 * 60; //  
            function CountDown() {
                if (maxtime >= 0) {
                    minutes = Math.floor(maxtime / 60);
                    seconds = Math.floor(maxtime % 60);
                    msg = "距离结束还有" + minutes + "分" + seconds + "秒";
                    document.all["timer"].innerHTML = msg;
                    if (maxtime == 5 * 60)alert("距离结束仅剩5分钟");
                        --maxtime;
                } else{
                    clearInterval(timer);
                    alert("时间到，结束!");
                }
            }
            timer = setInterval("CountDown()", 1000);     
 </script>

ログイン後にコピー

JS 10 分カウントダウンコードの具体的な手順:

1. 試験時間を maxtime = 10 * 60 秒、つまり 10 分に設定します。

2. maxtime が 0 以上である場合は、残りの分と秒を判定します。

3. if 関数を使用して時刻を再度判断します。残り 5 分になると、プロンプトが表示されます。終了まで残り 5 分です。時間が経過すると、タイマーがクリアされ、プロンプトは次のようになります: End

結果は図に示すとおりです:

JSで分カウントダウンを実装する方法（10分カウントダウンの例）