JavaScript의 카운트 다운 타이머

Nithin Krishnan 2023년10월12일
  1. JavaScript의 카운트 다운 타이머 예제 코드
  2. JavaScript의 카운트 다운 타이머 코드 설명
JavaScript의 카운트 다운 타이머

이 기사는 JavaScript에서 카운트 다운 타이머를 만드는 쉬운 방법을 제공합니다.

다음은 1 분 30 초 타이머 코드입니다.

<h1 class="text-center" id="count-down-timer"></h1>
function paddedFormat(num) {
  return num < 10 ? '0' + num : num;
}

function startCountDown(duration, element) {
  let secondsRemaining = duration;
  let min = 0;
  let sec = 0;

  let countInterval = setInterval(function() {
    min = parseInt(secondsRemaining / 60);
    sec = parseInt(secondsRemaining % 60);

    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

    secondsRemaining = secondsRemaining - 1;
    if (secondsRemaining < 0) {
      clearInterval(countInterval)
    };
  }, 1000);
}

window.onload = function() {
  let time_minutes = 1;   // Value in minutes
  let time_seconds = 30;  // Value in seconds

  let duration = time_minutes * 60 + time_seconds;

  element = document.querySelector('#count-down-timer');
  element.textContent =
      `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;

  startCountDown(--duration, element);
};

JavaScript의 카운트 다운 타이머 예제 코드

  • 타이머 용 HTML 태그 설정

    위 코드에서<h1>태그는 타이머 디스플레이를 보유합니다. 웹 페이지 HTML에서이 코드를 사용하세요. 런타임시 동적으로 요소 텍스트를 변경하기 위해count-down-timer ID를 사용하여 JavaScript에서 요소에 액세스하므로id="count-down-timer"가 필요합니다.

    <h1 class="text-center" id="count-down-timer"></h1>
    
  • 타이머 값 설정

    태그가 제자리에 있으면 다음 단계는 카운트 시간 값을 설정하는 것입니다. 일반적으로 웹 페이지는 코드에 내장 된 하드 코딩 된 시간을 사용하며 사용자 정의 할 수 없습니다. window.onload메소드의time_minutestime_seconds에서 타이머를 설정할 수 있습니다. 예를 들어 타이머를 1 분 30 초로 설정하려면 다음과 같이 코드를 설정하십시오.

    let time_minutes = 1;   // Value in minutes
    let time_seconds = 30;  // Value in seconds
    

    3 분으로 설정하려면time_minutes = 3을 설정하고time_seconds = 0은 그대로 둡니다. 이제 코드를 실행하거나 HTML을 다시로드하면 업데이트 된 출력을 얻을 수 있습니다.

JavaScript의 카운트 다운 타이머 코드 설명

  • window.onload함수로 실행이 시작됩니다. 사용자가 설정 한 타이머 값을 사용하여 총 시간을 초 단위로 계산합니다.
    let time_minutes = 1;   // Value in minutes
    let time_seconds = 30;  // Value in seconds
    
    let duration = time_minutes * 60 + time_seconds;
    
  • document.querySelector('#count-down-timer')는 요소의 HTML 노드를 가져옵니다. 이 노드는 타이머 값을 새로 고치는 데 사용됩니다.
    element = document.querySelector('#count-down-timer');
    
  • 요소를 사용할 수있게되면 당사에서 설정 한 값으로 초기화됩니다. 예를 들어 코드에서는 1 분 30 초입니다. 패딩 된 형식으로 설정됩니다.
    function paddedFormat(num) {
      return num < 10 ? '0' + num : num;
    }
    
    console.log(paddedFormat(3));
    console.log(paddedFormat(12));
    

    출력:

    03
    12
    
  • paddedFormat(num)함수는 패딩 된 숫자를 반환합니다. 분과 초의 경우 한 자리 값은 앞에0을 붙여서 채워집니다. 예를 들어 2 분과 5 초는 각각 02와 05로 채워집니다.
    element.textContent =
        `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;
    
  • 다음으로,duration을 초 단위로 전달하는startCountDown(--duration, element)함수를 호출하고 표시 요소의 HTML 노드를 호출합니다. 이제01:30값을 표시했습니다. 따라서01:29부터 시작하려면 타이머가 필요합니다. 이것이 우리가 기간--duration과 함께 감소 단항 연산자를 사용하는 이유입니다.
    startCountDown(--duration, element);
    
  • startCountDown(duration, element)은 타이머의 핵심입니다. 여기서는 JavaScript의setInterval(function(){}, 1000)함수를 사용하여clearInterval(countInterval)을 사용하여 해제되거나 종료 될 때까지 매초 (1000 밀리 초) 후에 타이머를 실행합니다.
    function startCountDown(duration, element) {
      let secondsRemaining = duration;
      let min = 0;
      let sec = 0;
    
      let countInterval = setInterval(function() {
        min = parseInt(secondsRemaining / 60);
        sec = parseInt(secondsRemaining % 60);
    
        element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;
    
        secondsRemaining = secondsRemaining - 1;
        if (secondsRemaining < 0) {
          clearInterval(countInterval)
        };
      }, 1000);
    }
    
  • setinterval()함수 내에서 표시 할 분과 초가 계산됩니다. 분은remainingSeconds값을 60으로 나누어 분 값을 제공하고 정수 부분을 취하여 계산됩니다.
    let secondsRemaining = 89;
    let min = parseInt(secondsRemaining / 60);
    let sec = parseInt(secondsRemaining % 60);
    
    console.log(secondsRemaining + 'seconds');
    console.log(min);
    console.log(sec);
    

    출력:

    89  // Equivalent to 1 min and 29 seconds
    1
    29
    
  • 다음으로 HTML 노드 요소의textContent속성을 사용하여 텍스트를 설정하여 웹 페이지에 계산 된 분과 초를 표시합니다.
    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;
    
  • 다음으로secondsRemaining에 대한 값이 감소하고 타이머 기능이setInterval()메소드를 사용하여 1 초마다 실행됩니다.
  • 마지막으로secondsRemaining값이 0이되면clearInterval(countInterval)이 트리거되어 타이머를 중지합니다. 또한 타이머가 다시 시작되지 않거나 마이너스 값이되도록합니다.

관련 문장 - JavaScript Timer