(ToDoList) #new Date을 활용한 시계만들기

원하는 결과

 

1. HTML 

- id값이 "clock"인 h1태그를 body안에 넣어준다.

<h1 id="clock">00:00:00</h1>

 

2. Javascript

const clock = document.querySelector("#clock");
const date = new Date();

// 시계함수(getClock) 만들기
function getClock(){

	// 시, 분, 초 변수 만들기
	const hours = date.getHours();
	const minutes = date.getMinutes();
    	const seconds = date.getSeconds();
    
    // clock html element에 변수로 치환하기
    clock.innerText = `${hours}:${minutes}:${seconds}`;
}


// 함수 호출하기
getClock();
setInterval(getClock, 1000)

 

위의 출력 값은 두자리 인 경우 12:13:31 출력이 되지만, 한자리인 숫자는 13:1:1 로 출력됨으로 두자리로 출력하기 위해서는,

	// 시, 분, 초 변수 만들기
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");

변수 부분을 String 문자열로 바꿔준뒤, padStart 함수를 써준다.

padStart는 문자열일때만 사용 가능하므로 String으로 바꿔주는 것.

padStart(문자자리수, 채워넣을 값) 으로 설정해준다.

padStart(2, "0") 의 의미는 즉 두자리 여야하고, 한자리는 0으로 넣어준다는 말이다.

매초마다 setInterval 함수를 활용해 함수를 실행해주어 시계처럼 활용한다.