220513 토이프로젝트 시계수정

노마드 코더에서 시계를 생성하는 법을 습득했다.
노마드 코더는 사랑..

const clock = document.querySelectorAll("h5#clock");

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

getClock();
setInterval(getClock, 60000);

오늘 날짜를 date변수에 받아온다.

const date = new Date();

여기서 padStart가 아주 중요한 녀석인데,

date의 시간(시,분,초)이 1,2,3,4,5,6,7,8,9의 한자리 수 일때,
두자리 수인 01, 02, 03, 04, 05, 06, 07, 08, 09로 짜잔하고 바꿔주는 고마운 친구다.

"1".padStart(2, "0") // "01"

위 예시로 알 수 있듯이 padStart의 1번째 인자는 내가 원하는 자릿수이다. 2번째 인자는 부족한 자릿수를 채울 문자다.
예를 들면 1번째 인자가 5였다면 다섯자리의 문자가 되기 위해 결과는 "00001"이 된다.

그렇게 만든 시,분,초들은 forEach를 사용하여 clock에 넣어줬다.

그리하여 getClock()이라는 함수가 만들어졌고,
현재시간을 60초(1분)마다 가져오면, 분단위로 변하는 시계가 만들어지게 된다.
그 60초마다를 담당하는 녀석이 바로 setInterval

setInterval(getClock, 60000);

setInterval의 첫번째 인자는 해당 시간마다 반복할 함수, 두 번째 인자는 시간간격을 ms단위로 적어 줘야 한다.

위와 같은 간단한 방법으로 시계를 만들어 낼수 있었다.

좋은건 한번 더 보기❤🧡❤