웹 페이지에서 특정 날짜나 이벤트까지 남은 시간을 실시간으로 보여주고 싶다면, JavaScript의 setInterval() 함수와 Date 객체를 활용해 손쉽게 카운트다운 타이머를 구현할 수 있습니다. 아래 예제는 목표 시각까지 남은 일(d) · 시간(h) · 분(m) · 초(s)를 1초마다 갱신하여 화면에 출력하는 방법을 소개합니다.
카운트다운 타이머 전체 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.timer {
text-align: center;
font-size: 60px;
margin-top: 0px;
color: white;
background-color: rgb(100, 38, 214);
}
</style>
</head>
<body>
<h1 style="text-align: center;">카운트다운 타이머 예제</h1>
<h2 class="timer"></h2>
<script>
var countDownDate = new Date("June 5, 2022 11:27:15").getTime();
var timeClear = setInterval(function() {
var now = new Date().getTime();
var timeLeft = countDownDate - now;
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (timeLeft < 0) {
clearInterval(timeClear);
document.querySelector(".timer").innerHTML = "타이머가 종료되었습니다";
}
}, 1000);
</script>
</body>
</html>
코드 동작 원리
1. 목표 시간 설정하기
new Date("목표 날짜").getTime()은 지정한 날짜와 시간을 밀리초(ms) 단위의 숫자로 변환합니다. 이 값을 기준으로 현재 시간과의 차이를 계산하게 됩니다.
2. 1초마다 반복 실행
setInterval(함수, 1000)은 지정한 함수를 1000밀리초(1초) 간격으로 계속 호출합니다. 매번 현재 시각을 구해 목표 시각에서 빼면, 남은 시간(timeLeft)이 밀리초 단위로 계산됩니다.
3. 일 · 시 · 분 · 초 단위로 변환
Math.floor()로 나눗셈 결과의 소수점을 버려 정수만 취하고, 나머지 연산자(%)를 활용하면 상위 단위를 제외한 잔여 시간을 쉽게 구할 수 있습니다.
- 일(days) : 전체 밀리초를 (1000 × 60 × 60 × 24)로 나눈 값
- 시간(hours) : 하루 단위를 제외한 나머지를 (1000 × 60 × 60)으로 나눈 값
- 분(minutes) : 한 시간 단위를 제외한 나머지를 (1000 × 60)으로 나눈 값
- 초(seconds) : 1분 단위를 제외한 나머지를 1000으로 나눈 값
4. 타이머 종료 처리
남은 시간이 0보다 작아지면 clearInterval()로 반복 실행을 중단하고, 대신 "타이머가 종료되었습니다"라는 메시지를 화면에 표시합니다.
실행 결과
위 코드를 브라우저에서 실행하면 보라색 배경의 타이머 영역에 다음과 같이 남은 시간이 실시간으로 표시됩니다.
활용 팁
- 목표 날짜 문자열("June 5, 2022 11:27:15")은 원하는 미래의 날짜와 시간으로 자유롭게 변경하세요.
- D-day 이벤트, 프로모션 마감 안내, 세션 만료 카운트 등 다양한 용도로 응용할 수 있습니다.
- 숫자가 한 자릿수일 때 앞에 0을 붙이고 싶다면
String(seconds).padStart(2, "0")처럼padStart()메서드를 활용하면 됩니다.