Bagaimana untuk Membina Pemasa Undur Sederhana Hanya Menggunakan JavaScript Vanila?

Mencipta Pemasa Kira detik yang Mudah dengan JavaScript Vanila

Dalam pembangunan web, selalunya perlu untuk melaksanakan pemasa detik. Walaupun pelbagai penyelesaian wujud, pemula mungkin menganggapnya terlalu rumit. Artikel ini menunjukkan cara mencipta pemasa kira detik yang ringkas dan bukan jQuery dalam JavaScript menggunakan pelaksanaan vanila.

Matlamat: Buat pemasa undur yang:

• Mengira turun dari "05:00" hingga "00:00".
• Ditetapkan semula kepada "05:00" selepas mencapai "00:00".
• Mengelakkan fungsi kompleks seperti objek Tarikh.

Pelaksanaan:

Untuk mencipta pemasa kami, kami menggunakan langkah berikut:

1. Tentukan Pemasa mula fungsi: Fungsi ini mengambil dua parameter: tempoh (dalam saat) dan elemen paparan untuk dikemas kini.
2. Mulakan pemasa dan pembolehubah: Kami menetapkan pemasa kepada tempoh yang disediakan dan hitung minit dan saat awal.
3. Gunakan setInterval untuk mengemas kini paparan: Setiap saat, kami kira semula minit dan saat, formatkannya dengan sifar pendahuluan jika perlu dan kemas kini elemen paparan.
4. Tetapkan semula pemasa apabila mencapai 0: Selepas setiap pengurangan, kami menyemak sama ada pemasa telah mencapai 0 dan tetapkannya semula jika perlu.

The Kod:

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>

Kod ini mencipta pemasa kira detik yang mengemas kini elemen paparan dengan baki masa setiap saat. Apabila pemasa mencapai 00:00, ia ditetapkan semula kepada 05:00.

Atas ialah kandungan terperinci Bagaimana untuk Membina Pemasa Undur Sederhana Hanya Menggunakan JavaScript Vanila?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!