6. Clock 만들기 (Timeouts and Dates)

- HTML -

'시간:분:초' 로 만듬.

 

- JS -

const clock = document.querySelector("h2#clock"); 를 하여
clock 라는 변하지 않는 변수에

document.querySelector("h2#clock")를 하여

h2의 clock이라는 id를 가진 element를 저장함.

function getClock() {
const date = new Date();
clock.innerText = 
`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
} 를 하여

시:분:초를 clock의 innerText에 작성하는 getClock란 함수를 만듬.

( new Date() 는 new 키워드를 사용한 new Date()는 Date 타입인 새로운 객체를 생성함 )

clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; 를 하여

clock의 innerText에 date.getHours():date.getMinutes():date.getSeconds 를 넣어줌.

 

date.getDate -> 몇 일인지

date.getDay -> 무슨 요일인지를 숫자로 (일요일->0 /토요일-> 6)

date.getFullYear -> 몇 년도인지

date.getHours -> 현재 시간

date.getMinutes -> 현재 분

date.getSeconds -> 현재 초

getClock(); 를 하여

브라우저에서 즉시 getClock이란 함수를 실행하도록 함.

(작성하지 않으면 밑의 코드 때문에 브라우저를 새로고침하고 1초 뒤 부터 실행하게 됨.)

 

setInterval(getClock, 1000); 를 하여

getClock이란 함수를 1초의 간격을 두고 반복해서 실행하도록 함.

 

setInterval()는  함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용.

setTimeout()는 setInterval()와 달리 반복하지 않고 설정한 시간 이후에 한 번만 실행함.

( setInterval()와 setTimeout() 모두 시간은 ms 단위로 입력함 )

 

 

 

 

- 화면 -

현재의 시간이 1초마다 바뀌며 화면에 표시됨.