Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript 카운트다운 타이머 만들기: 단계별 완벽 가이드

카운트다운 타이머는 인터넷 곳곳에서 중요한 이벤트를 앞두고 남은 시간을 알려주는 용도로 널리 활용되고 있습니다.

새로운 웹사이트 오픈일을 알리거나, 신제품 출시일을 공지하거나, 결혼식·행사 D-day를 표시하는 등 그 활용 범위는 무궁무진합니다.

이 가이드에서는 HTML, CSS, JavaScript 세 가지 기술만으로 카운트다운 타이머를 직접 만드는 방법을 단계별로 소개합니다. 지금 바로 시작해 보겠습니다!

1. 웹페이지 기본 구조 만들기

가장 먼저 할 일은 기본적인 웹페이지를 구성하는 것입니다. 이번 튜토리얼에서는 외부 라이브러리 없이 순수한 HTML, CSS, JavaScript만 사용하겠습니다.

다음과 같이 HTML 파일을 생성합니다:

<!DOCTYPE html>
<html>
	<script>
		// JavaScript 코드를 작성할 위치입니다
	</script>
	<style>
		// CSS 스타일을 작성할 위치입니다
	</style>
	<body>
		<h1>It's almost time…</h1>
		<div id="timer"></div>
	</body>
</html>

현재 상태로 페이지를 열면 아래와 같이 스타일 없이 제목만 표시됩니다:

JavaScript 카운트다운 타이머 만들기: 단계별 완벽 가이드

아직 CSS 스타일을 적용하지 않았고, 타이머를 동작시키는 JavaScript도 작성하지 않았기 때문입니다. 이제 타이머의 핵심인 JavaScript 코드를 만들어 보겠습니다.

2. 카운트다운 타이머 로직 구현하기

JavaScript에는 날짜와 시간을 다룰 수 있는 유용한 Date 객체가 내장되어 있습니다. 우리는 이 객체를 두 가지 용도로 사용합니다. 하나는 카운트다운할 목표 시점의 타임스탬프를 얻는 것이고, 다른 하나는 현재 날짜를 가져오는 것입니다.

이 튜토리얼에서는 모든 스크립트를 <script></script> 태그 안에 작성하며, 별도의 외부 스크립트 파일은 사용하지 않습니다.

두 날짜의 차이 계산하기

목표 날짜에서 현재 날짜를 빼면 두 날짜 사이의 차이, 즉 남은 시간을 구할 수 있습니다:

var timeLeft = +new Date("2021-05-04") - +new Date();

이 코드는 2021년 5월 4일 '스타워즈의 날'까지 남은 시간을 계산합니다. 실제 프로젝트에서는 여러분이 원하는 목표 날짜로 자유롭게 변경하면 됩니다.

이제 두 날짜의 차이를 알게 되었지만, 아직 해결해야 할 문제가 두 가지 있습니다. 첫째, 시간이 실제로 줄어드는 타이머가 아직 없습니다. 둘째, 계산 결과가 밀리초 단위로 저장되어 사람이 읽기 어렵습니다. 밀리초 값을 일, 시간, 분 단위로 변환해야 합니다.

밀리초를 일·시간·분으로 변환하기

다음 코드를 사용하면 남은 시간을 보기 좋은 형태로 계산할 수 있습니다:

var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);

계산된 값들을 문자열로 조합하는 코드는 다음과 같습니다:

const timeLeftText = `${daysLeft}일 ${hoursLeft}시간 ${minutesLeft}분 남았습니다.`;

여기서는 템플릿 리터럴(문자열 보간법)을 활용해 앞서 계산한 값들을 삽입했습니다. 실행 결과는 "314일 13시간 52분 남았습니다."처럼 표시됩니다.

화면에 출력하고 1분마다 자동 갱신하기

타임스탬프를 생성했으니, 이제 웹페이지에 출력해 보겠습니다:

document.getElementById("timer").innerHTML = timeLeftText;

지금까지 작성한 코드를 하나의 함수로 정리하면 다음과 같습니다:

function countdown() {
	var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
	var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
	var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);

	const timeLeftText = `${daysLeft}일 ${hoursLeft}시간 ${minutesLeft}분 남았습니다.`;
	document.getElementById("timer").innerHTML = timeLeftText;
}

countdown();

페이지를 불러오면 아래와 같이 남은 시간이 표시됩니다:

JavaScript 카운트다운 타이머 만들기: 단계별 완벽 가이드

이제 타이머가 생겼으니 끝난 걸까요? 아직입니다! 잠시 기다려 보면 타이머가 실제로 줄어들지 않는다는 것을 알 수 있습니다. 브라우저에게 매분마다 화면을 갱신하라고 명령하지 않았기 때문입니다. 다음 코드를 countdown() 함수 선언 뒤에 추가하세요:

setInterval(countdown, 60000);

이 코드는 60,000밀리초, 즉 60초(1분)마다 countdown 함수를 반복 실행해 화면을 갱신합니다. 이제 코드를 실행하면 매분마다 숫자가 줄어드는 것을 확인할 수 있습니다!

3. CSS로 스타일 입히기

카운트다운 타이머는 정상적으로 동작하지만, 딱히 보기 좋지는 않습니다. 몇 가지 스타일을 추가해 페이지를 더 매력적으로 꾸며 보겠습니다:

<style>
body {
	padding-top: 20%;
	height: 100vh;
	background: linear-gradient(to bottom right, #CAA89C, #434EFC);
}
h1, p {
	text-align: center;
	color: white;
}
</style>

스타일을 적용한 후 웹페이지는 아래와 같이 변합니다:

JavaScript 카운트다운 타이머 만들기: 단계별 완벽 가이드

그라디언트 배경이 적용되고, 텍스트가 가운데 정렬된 흰색으로 표시됩니다. 훨씬 세련된 느낌이죠!

마무리

카운트다운 타이머는 수많은 웹사이트에서 중요한 역할을 하는 기능입니다. 개인 블로그에서는 결혼식 D-day를, 기업 웹사이트에서는 제품 출시일을 알리는 데 활용되곤 합니다.

응용 팁을 하나 더 드리자면, 초 단위 카운트다운이 필요하다면 setInterval의 간격을 1000으로 줄이고 secondsLeft 변수를 추가하면 됩니다. 또한 목표 시간이 지났을 때 "카운트다운 종료!" 같은 메시지를 표시하도록 조건문을 추가하면 더욱 완성도 높은 타이머가 됩니다.

이제 여러분도 전문가처럼 자신만의 JavaScript 카운트다운 타이머를 만들 준비가 되었습니다!