Bagaimana untuk Mencipta Pemasa Undur JavaScript Mudah dengan dan tanpa jQuery?

Mencipta Pemasa Kira detik JavaScript yang Mudah

Melaksanakan pemasa undur dalam JavaScript boleh menjadi mudah, walaupun tanpa menggunakan objek Tarikh yang kompleks. Berikut ialah panduan ringkas untuk mencipta pemasa undur mudah:

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

Kod ini menetapkan pembolehubah pemasa yang ditetapkan kepada tempoh yang dikehendaki dalam beberapa saat (dalam ini kes, 5 minit) dan mengemas kini elemen paparan dengan masa yang tinggal. Ia menyegarkan setiap saat, mengurangkan pemasa setiap kali dan memaparkan minit dan saat yang diformatkan. Setelah masa berlalu, pemasa ditetapkan semula kepada tempoh awal.

Pilihan jQuery (dengan Butang Mula/Berhenti)

Untuk versi dengan butang mula/henti:

$(function () {
    var timer = 60 * 5,
        display = $("#time"),
        interval;
    $("#start").click(function () {
        interval = setInterval(function () {
            var minutes = Math.floor(timer / 60),
                seconds = timer % 60;
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            display.text(minutes + ":" + seconds);
            timer--;
            if (timer < 0) {
                clearInterval(interval);
                timer = 60 * 5;
            }
        }, 1000);
    });
    $("#stop").click(function () {
        clearInterval(interval);
    });
});

Versi ini termasuk butang mula yang memulakan pemasa dan butang berhenti yang menjedanya. Ia menggunakan jQuery untuk kemudahan, memudahkan manipulasi elemen DOM.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pemasa Undur JavaScript Mudah dengan dan tanpa jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!