javascript 실시간 D-day 계산기 만들기 (setInterval, Date, padStart)

결과물

 

• 실시간 현재시각
• 크리스마스 까지 남은 시간 표기

 HTML

	<h2>Time Until Christmas Eve</h2>
	<h2 id="testClock"></h2>

• HTML 내용은 정말 별게 없다.
• 실시간 현재 시간을 표기하는 것은 같은 원리이므로 생략

 

해당 결과물을 제작하기 위해 알아야 할 것 3가지
1. new Date() - 시간 생성
2. setInterval() - javascript 함수
3. padStart() - javascript 함수

 

JavaScript

1. new Date()

const date = new Date(); 
console.log(date);
// 현재 시간을 불러오는 방법

 

2. setInterval()

setInterval(getTestClock, 1000);
// 1초마다 getTestClock 함수를 실행시켜달라는 함수

 

3. padStart()

const seconds = String(date.getSeconds()).padStart(2,"0");

// 1m 5s 가 아닌 01m 05s 로 표기 되도록하는 함수
// String 으로 문자열로 변경한다음
// padStart를 이용하여 앞쪽 총 2개의 자리가 비었으면 "0"을 입력하도록 함

 

4. 전체코드

const testClock = document.querySelector("#testClock");

function getTestClock(){
	const chrisDate = new Date(2022,11,25,00,00,00,0000);
	// 구하고자 하는 변수안에 Date 년, 월(0부터시작), 일, 시간, 분, 초, ms 를 입력
		
	const todayDate = new Date();
	// 현재 날짜를 todayDate 변수에 담기
    
	const distance = chrisDate.getTime() - todayDate.getTime();
	// 크리스마스 시간 - 현재 시간 getTime 메서드를 이용하여 밀리초의 값으로 가져온다.

	const day = Math.floor(distance/(1000*60*60*24));
	// Math.floor 함수를 이용해서 근접한 정수값 가져오기
	// ms 이기 떄문에 1000 곱해주기
	// 100 * 60 => 60초(1분)*60 -> 60분 (1시간) * 24 = 24시간 (하루)
    
	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");
	// 나머지 연산자를 통해서 시 분 초 구해주기
	// 시간, 분, 초 는 01, 02, 03으로 표기되기를 원하므로 String, padStart 추가로 입력
	
	testClock.innerText = `${day}d ${hours}h ${minutes}m ${seconds}s`


}

getTestClock();
// 처음 0~1초 사이 빈공간을 메워주기 위한 호출
setInterval(getTestClock, 1000);
// 1초마다 getTestClock 호출