単純な JavaScript カウントダウンタイマーを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-12-02 09:20:10

オリジナル

675 人が閲覧しました

How Can I Create a Simple JavaScript Countdown Timer?

シンプルな 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 サイトの他の関連記事を参照してください。