ホームページ > 記事 > ウェブフロントエンド > JSで分カウントダウンを実装する方法（10分カウントダウンの例）
JSで分カウントダウンを実装する方法（10分カウントダウンの例）
- yuliaオリジナル
- 2018-10-17 17:20:3020952ブラウズ
職場ではページにカウントダウンを設定する必要がよくありますが、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
結果は図に示すとおりです:
上で 10 分をカウントダウンするための JS コードを共有しました。手順は非常に詳細であり、初心者でも簡単に試して、達成できるかどうかを確認できます。カウントダウン効果については、この記事が役立つことを願っています。
[関連チュートリアルの推奨事項]
1.
JavaScript 中国語リファレンス マニュアル2. JavaScript ビデオ チュートリアル
ブートストラップ チュートリアル
以上がJSで分カウントダウンを実装する方法（10分カウントダウンの例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。