실시간 시계 만들기

const clock = document.querySelector("h2#clock")

function getClock() {
    const date = new Date();
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");
    clock.innerText = `${hours}:${minutes}:${seconds}`;
}

getClock();
setInterval(getClock, 1000);

new Date()를 실행시키면 현재 날짜, 시간을 객체로 받아올 수 있다

getHours(), getMinutes(), getSeconds()를 이용해 시간, 분, 초 의 값을 숫자로 받아올 수 있다

 

시, 분, 초가 한자릿 수일경우 숫자앞에 0을 붙여 두자릿수를 유지할 수 있도록 만들기 위해 padStrat()를 이용했다

padStart()는 문자열의 길이를 측정해 원하는 길이가 충족되지 않을경우 지정한 문자열을 앞쪽에 붙여 원하는 길이를 만들어 준다

date.getHours()는 숫자이기때문에 String()을 이용해 문자열로 바꾸어주었고, 그 뒤에 padStart(2, "0")를 붙여 총길이 2, 길이가 짧을경우 앞에 문자"0"을 붙이도록 설정했다

1:1:1 -> 01:01:01

 

setInterval을 이용해 getClock함수가 매초마다 반복되도록 설정해주어 실시간으로 변경되는 시간을 볼 수 있다