const clock = document.querySelector("h2#clock");
function getClock() {
const date = new Date();
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
getClock();
setInterval(getClock, 1000);
이 전 글에서도 알다시피 시계의 초가 59초에서 00초로 넘어갈 때 위의 코드는 00초가 아닌 한 자리 수(0초)가 되는데 지금부터는 string을 문자 두 개로 채우는 것을 해볼 것이다.
padStart
라는 function으로 이미 만들어져 있다. string에 쓸 수 있는 function이다.
"1".padStart(2, "0");
"01"
위의 코드는 "1"이라는 string이 있고, padStart
를 사용해 string의 길이를 2로 만들 것인데 만약 string의 길이가 2가 아니라면 앞 쪽에 "0"을 추가해줘 라는 의미이다.
"12".padStart(2, "0");
"12"
위의 코드는 이미 길이가 2이기 때문에 아무런 변화 없이 12가 출력된다.
"1".padEnd(2, "0");
"10"
padEnd
는 뒤에 추가 해주는 것이다.
그렇다면 우리가 만들던 시계를 수정해보자.
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}`;
}
코드에서 getHours
는 숫자이다. 하지만 padStart
는 string에서 사용하는 것이기 때문에 String(new Date().getHours())
처럼 숫자를 string으로 변환해주어야 한다.