간단한 JavaScript 카운트다운 타이머를 어떻게 만들 수 있나요?

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

최소한의 카운트다운 타이머 만들기에 대한 문의는 웹 개발에서 흔히 발생하는 질문입니다. 이를 달성하는 데 관련된 단계를 분석해 보겠습니다.

바닐라 JavaScript 접근 방식:

"05:00"부터 다음까지 카운트다운하는 타이머를 표시해야 하는 특정 요구 사항에 대해 "00:00" 및 재설정을 수행하는 경우 바닐라 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);
};

In 이 스크립트:

• duration은 초기 카운트다운 시간을 초(여기서는 5분) 단위로 지정합니다.
• display는 카운트다운을 표시하는 HTML 요소입니다.
• setInterval은 매초(1000밀리초)마다 타이머 로직을 실행합니다.
• 타이머 내부에서parseInt는 남은 시간을 분과 초로 변환하는 데 사용됩니다.
• 표시된 문자열은 "05:00" 형식을 유지하기 위해 0으로 채워집니다.
• 타이머가 0에 도달하면 다시 재설정됩니다. 기간.

추가 기능:

원하는 경우 시작/중지 버튼과 같은 기능으로 기능을 확장할 수 있습니다.

<button>

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

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

위 내용은 간단한 JavaScript 카운트다운 타이머를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!