[JavaScript] 간단한 시계만들기 : setInterval(), setTimeout(), Date()

setInterval(인자1, 인자2)

 

인자1 은 실행시키려는 함수

인자2 는 시간 간격(단위 : ms) 1000ms = 1초

setTimeout(인자1, 인자2)

동일하게 실행시키고 싶은 함수를 인자1에 넣어준다.

대신에 이 함수가 실행되는건 인자2 ms 만큼의 시간이 흐른뒤에다.

 

매초마다 새로운 Date Object 를 만들어준다. 최근의 시 분 초 를 가지고 있는 Date Object를 말이다.

 

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

function getClock() {
  const date = new Date();
  clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
getClock();
setInterval(getClock, 1000);

내가 겪고있는 문제를 거의 다른 개발자도 100% 겪었다고 확신해도 좋다.

그리고 그 문제를 지속적으로 반복해서 겪었다면

거기에 대한 함수를 JavaScript에서 제공하고 있을 것이다.

 

초가 0~9 일때 우리가 원하는 것은 00 01 02 03 ... 09 일텐데 그렇지 않다.

 

이런 문제를 다른 개발자도 이미 겪었고 이를 해결해주는 함수가 바로

padStart() 이다.

 

padStrat() 라는 함수의 의미는 padding(여백)을 넣어달라 어디에? Start(시작) 에 

 

 

String 타입에만 적용되는건지 형변환을 해주니 잘동작하였다. String 타입에 적용되는 padStrat() 함수

getSeconds() 함수에 커서를 올리고 설명을 보니 반환하는 값의 형태가 number 임을 알 수 있었다.

 

 

시, 분, 초에 모두 적용해 주었다.

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);