바닐라 JavaScript만 사용하여 간단한 카운트다운 타이머를 만드는 방법은 무엇입니까?

바닐라 JavaScript로 간단한 카운트다운 타이머 만들기

웹 개발에서는 카운트다운 타이머를 구현해야 하는 경우가 많습니다. 다양한 솔루션이 존재하지만 초보자에게는 솔루션이 지나치게 복잡하다고 느낄 수 있습니다. 이 기사에서는 바닐라 구현을 사용하여 JavaScript에서 jQuery가 아닌 간단한 카운트다운 타이머를 만드는 방법을 보여줍니다.

목표: 다음과 같은 카운트다운 타이머를 만듭니다.

• "05:00"부터 "00:00"까지 카운트다운됩니다.
• 다음으로 재설정됩니다. "00:00"에 도달한 후 "05:00".
• Date 객체와 같은 복잡한 기능을 방지합니다.

구현:

To 타이머를 만들고 다음을 사용합니다. 단계:

1. startTimer 함수 정의: 이 함수는 기간(초)과 업데이트할 표시 요소라는 두 가지 매개변수를 사용합니다.
2. 타이머 및 변수 초기화: 타이머를 제공된 기간으로 설정하고 초기 분과 초.
3. setInterval을 사용하여 디스플레이 업데이트: 매초 분과 초를 다시 계산하고 필요한 경우 앞에 0을 사용하여 형식을 지정하고 표시 요소를 업데이트합니다.
4. 0에 도달할 때 타이머 재설정: 각 감소 후에 타이머가 0에 도달했는지 확인하고 다음과 같은 경우 재설정합니다. 필요합니다.

코드:

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>

이 코드는 매초 남은 시간으로 디스플레이 요소를 업데이트하는 카운트다운 타이머. 타이머가 00:00에 도달하면 05:00으로 재설정됩니다.

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