単純な JavaScript カウントダウン タイマーを作成するにはどうすればよいですか?

シンプルな JavaScript カウントダウン タイマーの作成

最小限のカウントダウン タイマーの作成に関する質問は、Web 開発ではよくある質問です。これを実現するために必要な手順を詳しく見てみましょう。

バニラ JavaScript アプローチ:

「05:00」から「05:00」までカウントダウンするタイマーを表示するという特定の要件については、 「00:00」およびリセットの場合、バニラを使用して次のアプローチを採用できます。 JavaScript:

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

このスクリプト内:

• duration は、初期カウントダウン時間を秒単位で指定します (ここでは 5 分)。
• display は HTML 要素です。カウントダウンが表示されます。
• setInterval はタイマー ロジックを 1 秒ごとに実行します (1000
• タイマー内では、parseInt を使用して残り時間を分と秒に変換します。
• 表示される文字列には、「05:00」形式を維持するためにゼロが埋め込まれます。
• タイマーが 0 になると、リセットされます。

追加機能:

必要に応じて、開始/停止ボタンなどの機能を使用して機能を拡張できます:

<button>

document.getElementById("start").addEventListener("click", function () {
    // Start the timer...
});

document.getElementById("stop").addEventListener("click", function () {
    // Stop the timer...
});

以上が単純な JavaScript カウントダウン タイマーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。