자바스크립트로 시계 만들기

// 00:00:00 이라고 적어 둔 h2태그를 clock 상수에 넣는다.
const clock = document.querySelector("h2#clock");

// interval에서 실행 할 함수
function getClock() {
  const date = new Date();  // 시간을 매번 다시 얻어옴
  
  // 만약 5시 6분 0초이면 5:6:0 이 아닌 05:06:00 이 되게 하기 위한 작업
  // padStart()는 문자열에만 적용이 되기 때문에 String으로 문자화 시켜야한다.
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  
  // 00:00:00으로 적어 뒀던 h2태그의 글을 아래 코드처럼 바꿔준다.
  clock.innerText = `${hours}:${minutes}:${seconds}`;
}

// 이 함수를 바로 실행하지 않으면
// 새로고침 후 1초 뒤 시간이 카운트된다.
// 그러므로 페이지를 열자마자 바로 시계가 뜨도록 해야한다.
getClock();

// 1초에 한번씩 getClock 함수를 실행
setInterval(getClock, 1000);