자바스크립트에서는 setInterval 메서드를 사용하여 카운트다운 타이머를 손쉽게 구현할 수 있습니다. setInterval() 메서드는 지정한 시간 간격마다 함수를 반복적으로 호출하거나 코드 블록을 실행하는 역할을 합니다.
카운트다운 타이머의 기본 원리
카운트다운을 만들려면 현재 시간과 목표 시간의 차이를 계산하고, 이 차이를 일정한 간격으로 계속 갱신해 주어야 합니다. 즉, 매초 남은 시간을 다시 계산하면서 화면에 표시하는 방식으로 동작합니다.
예제 코드
아래 예제는 특정 날짜까지 남은 시간을 일, 시간, 분, 초 단위로 계산하여 콘솔에 출력하는 카운트다운 타이머입니다.
let countDownDate = new Date("Jul 21, 2020 00:00:00").getTime();
let x = setInterval(() => {
let now = new Date().getTime();
let distance = countDownDate - now;
// 일, 시간, 분, 초 단위로 시간 계산
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s");
// 카운트다운이 종료되면 타이머 정지
if (distance < 0) {
clearInterval(x);
console.log("completed")
}
}, 1000);코드 설명
- countDownDate: 목표 시각을 Date 객체로 생성한 후 getTime()으로 밀리초 단위 타임스탬프로 변환합니다.
- distance: 목표 시각에서 현재 시각을 뺀 값으로, 남은 시간(밀리초)을 의미합니다.
- Math.floor(): 나눗셈 결과에서 소수점을 버려 정수 단위의 일·시·분·초를 구합니다.
- clearInterval(x): distance가 0보다 작아지면, 즉 카운트다운이 끝나면 setInterval을 해제하여 타이머를 멈춥니다.
실행 결과
위 코드를 실행하면 1초마다 남은 시간이 아래와 같이 출력됩니다.
310d 0h 6m 46s 310d 0h 6m 45s 310d 0h 6m 44s 310d 0h 6m 43s 310d 0h 6m 42s 310d 0h 6m 41s 310d 0h 6m 40s 310d 0h 6m 39s 310d 0h 6m 38s 310d 0h 6m 37s 310d 0h 6m 36s 310d 0h 6m 35s 310d 0h 6m 34s 310d 0h 6m 33s
마무리
이처럼 setInterval과 Date 객체만 활용하면 별도의 라이브러리 없이도 간단한 카운트다운 타이머를 만들 수 있습니다. 실제 프로젝트에서는 console.log 대신 DOM 요소에 결과를 렌더링하고, clearInterval로 타이머를 정확히 정리해 주는 것이 좋습니다. 또한 더 정밀한 시간 표시가 필요하다면 requestAnimationFrame이나 Web Worker를 활용하는 방법도 고려해 볼 수 있습니다.