Countdown Timer 만들기

오늘은 2021년 11월 24일이다.
새해가 밝기까지 얼마나 시간이 남았는지를 화면에 보여주는 Countdown Timer을 만드는 예제는 다음과 같다.

HTML 코드는 다음과 같다.

<h1>Time Until Happy New Year!</h1>
<h2 class="clock"></h2>

JavaScript를 이용하여 class가 clock인 h2태그에 타이머 텍스트를 넣어주는 함수를 만든다.

Javascript 코드는 다음과 같다.

const clock = document.querySelector(".clock")
function getClock() {
	const newYearDate = new Date("January 1, 2022 00:00:00");
    const now = new Date();
    const distance = newYearDate - now;
    const date = String(Math.floor(distance / (1000*60*60*24))).padStart(2, "0");
    const hours = String(Math.floor((distance % (1000*60*60*24)) / (1000*60*60))).padStart(2, "0");
    const minutes = String(Math.floor((distance % (1000*60*60)) / (1000*60))).padStart(2, "0");
    const seconds = String(Math.floor((distance % (1000*60)) / 1000)).padStart(2, "0");
    clock.innerText = `${date}d ${hours}h ${minutes}m ${seconds}s`
}
getClock();
setInterval(getClock, 1000);

1. clock 변수는 html의 h2 태그를 가르키는 변수이다.
2. getClock 함수는 새해에서 오늘의 시간을 빼고, 이를 h2태그에 출력시켜주는 함수이다.
3. setInterval 함수는 지정된 ms마다 함수를 update시켜주는 함수이다.