jQuery를 사용하거나 사용하지 않고 간단한 JavaScript 카운트다운 타이머를 만드는 방법은 무엇입니까?

간단한 JavaScript 카운트다운 타이머 만들기

복잡한 Date 객체를 활용하지 않고도 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);
};

이 코드는 원하는 시간(초)으로 설정된 타이머 변수를 설정합니다(이 코드에서는 경우 5분) 남은 시간으로 표시 요소를 업데이트합니다. 매초 새로 고쳐지고, 매번 타이머가 감소하고 형식화된 분과 초가 표시됩니다. 시간이 경과하면 타이머는 초기 지속 시간으로 재설정됩니다.

jQuery 옵션(시작/중지 버튼 포함)

시작/중지 버튼이 있는 버전의 경우:

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

이 버전에는 타이머를 시작하는 시작 버튼과 타이머를 일시 중지하는 중지 버튼이 포함되어 있습니다. 편의를 위해 jQuery를 사용하여 DOM 요소 조작을 단순화합니다.

위 내용은 jQuery를 사용하거나 사용하지 않고 간단한 JavaScript 카운트다운 타이머를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!