バニラ JavaScript のみを使用してシンプルなカウントダウン タイマーを構築する方法

バニラ JavaScript を使用したシンプルなカウントダウン タイマーの作成

Web 開発では、多くの場合、カウントダウン タイマーを実装する必要があります。さまざまな解決策が存在しますが、初心者にとっては非常に複雑に感じるかもしれません。この記事では、バニラ実装を使用して、JavaScript で単純な非 jQuery カウントダウン タイマーを作成する方法を説明します。

目標: 次のようなカウントダウン タイマーを作成します。

• 「05:00」から「05:00」までのカウントダウン"00:00".
• "00:00" に達すると "05:00" にリセットされます。
• Date オブジェクトのような複雑な関数を回避します。

実装:

タイマーを作成するには、次の手順を使用します:

1. startTimer 関数を定義します: この関数は、期間 (秒) と更新する表示要素の 2 つのパラメーターを受け取ります。
2. タイマーと変数を初期化します: タイマーを指定された期間に設定し、最初の分と変数を計算します。秒。
3. setInterval を使用して表示を更新します。 毎秒、分と秒を再計算し、必要に応じて先頭にゼロを付けてフォーマットし、表示要素を更新します。
4. 0 に達したらタイマーをリセットする: デクリメントするたびに、タイマーが 0 に達したかどうかを確認し、0 に達した場合はリセットします。

コード:

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);
};

HTML:

<div>Registration closes in <span>

このコードは残り時間を毎秒表示要素に更新するカウントダウン タイマー。タイマーが 00:00 になると、05:00 にリセットされます。

以上がバニラ JavaScript のみを使用してシンプルなカウントダウン タイマーを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。