Date, padStart 메서드 사용해 시계만들기

기본으로 내장되어 있는 Date 메서드 사용

new Date()
// Wed Dec 08 2021 17:16:18 GMT+0900 (한국 표준시)
// 현재 날짜를 가져옴

수많은 Date관련 메서드들이 있음(getDate, getDay, getFullYear...)

콘솔창에 쳐보자.

const date = new Date()
//undefined
//현재 시간을 date 라는 변수에 할당

date.getDate()
//8
date.getDay()
//3 ( 수요일 )
date.getFullYear()
//2021
date.getHours()
//17
date.getMinutes()
//18
date.getSeconds()
//3

getHours, getMinutes, getSeconds를 매초 호출해 현재 시간을 띄워주면 될 듯?

new Date().getHours()
//17
new Date().getMinutes()
//22
new Date().getSeconds()
//32

앞서 알게 된 setInterval 과 setTimeout을 통해 어떻게 활용하면될까

setInterval을 통해 매 초마다 위의 3가지를 호출?
맞다.

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

function getClock() {
  const date = new Date();
  console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}

setInterval(getClock, 1000);

이렇게 하면 콘솔에 매 초 시간이 찍힌다.

이렇게.

하지만 새로고침하면 1초 뒤에 시작된다 타이머가.
바로 시간을 보여주려면

getClock();
setInterval(getClock, 1000);

이렇게 아까 만든 시간을 보여주는 getClock() 함수를 위에 추가해주면 해결된다.

화면에 띄우려면 당연히

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

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

해주면 HTML 상에 시간이 흐르는것이 보인다. 굿.

하지만 초 단위가 03 04 가 아니라 3 4 로 뜬다.

해결하려면?

padStart

원하는 문자열이 최소한의 갯수를 채우지 않으면 지정한 문자열을 넣어주는 기능.
만약 2자리 문자열을 원하는데, 나타나는 문자열은 한자리이다?

"3" 이라는 문자열의 길이가 2가 아니라면 앞에 "0"을 붙여주고싶다?
"3".padStart(2, "0")
이런식으로 해주면 되는 것.

물론 이미 길이가 2 혹은 그 이상이라면 "0"으로 채워지진 않는다.

반대로 padEnd도 있다.

어쨌든 일단

앞서 설정한 변수들을 모두 조금씩 바꿔줘야한다.

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");
 	// padStart메서드는 문자열을 상대하기 때문에
  	// String()으로 감싸준다 : 숫자를 문자열로 바꿔주는 내장함수

  clock.innerText = `${hours}:${minutes}:${seconds}`;
}

getClock();
setInterval(getClock, 1000);