Bagaimanakah Saya Boleh Mencipta Pemasa Undur JavaScript Mudah?

Membuat Pemasa Kira detik JavaScript yang Mudah

Pertanyaan anda tentang membuat pemasa undur minimalis adalah perkara biasa dalam pembangunan web. Mari kita pecahkan langkah-langkah yang terlibat dalam mencapai ini.

Pendekatan JavaScript Vanila:

Untuk keperluan khusus anda memaparkan pemasa yang mengira detik dari "05:00" hingga "00:00" dan set semula, anda boleh menggunakan pendekatan berikut menggunakan JavaScript vanila:

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

Dalam skrip ini:

• tempoh menentukan masa kira detik awal dalam saat (di sini, 5 minit).
• paparan ialah elemen HTML yang akan menunjukkan kira detik.
• setInterval melaksanakan logik pemasa setiap saat (1000 milisaat).
• Di dalam pemasa, parseInt digunakan untuk menukar baki masa kepada minit dan saat.
• Rentetan yang dipaparkan dipadatkan dengan sifar untuk mengekalkan format "05:00".
• Apabila pemasa mencapai 0, ia ditetapkan semula kepada tempoh.

Tambahan Ciri:

Jika mahu, anda boleh melanjutkan fungsi dengan ciri seperti butang mula/henti:

<button>

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

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Pemasa Undur JavaScript Mudah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!