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_minutes및time_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을 다시로드하면 업데이트 된 출력을 얻을 수 있습니다.

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)이 트리거되어 타이머를 중지합니다. 또한 타이머가 다시 시작되지 않거나 마이너스 값이되도록합니다.