Interval, Timeout
Interval은 특정 시간마다 반복적으로 실행되게 만들고,
Timeout은 일정 시간이 지난 후에 한번 실행되게 만든다.
// Interval
setInterval(함수, 시간(ms))
// Timeout
setTimeout(함수, 시간(ms))
이렇게 작성하면 된다. 기본적인 형태는 같지만, 기능이 다르다는 점을 유의하자!
우리는 이 Interval을 이용하여 매 1초마다 시간을 가져와 시간 기능을 화면에 띄울 수 있다.
어떻게 할 수 있을까?
답은 쉽다. new Date() 함수이다.
바로 new Date() 함수를 이용하여 현재 시간을 가져올 수 있다.
new Date()를 date로 정의해주고 .getHours / .getMinutes / .getSeconds 를 이용하여 매 시, 분, 초 를 불러올 수 있으므로 h2안에 innerText로 작성한다.
const clock = document.querySelector("h2#clock");
function getClock() {
const date = new Date();
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
getClock();
setInterval(getClock, 1000);
중간에 getClock()을 한 번 쓰는 이유는 페이지에 바로 들어가자마자 시간을 띄워주기 위함이다.
이렇게 띄우면 홈페이지에 시간이 잘 표시되는 것을 볼 수 있다.
하지만 여전히 살짝 아쉬운 부분이 있다.
바로 초 단위에서 10초미만은 19:18:08 이 아닌 19:18:8 이런 식으로 표기가 되었다.
이 부분을 바로 잡기 위해 padStart 을 사용하였다.
padStart
padStart의 기본 형태는 이렇다.
.padStart(문자열의 길이(length), 추가하고 싶은 문자열(padString))
예를 들어, "1".padStart(2, "0") 을 실행하면 "01" 이 출력된다.
그렇다면 위에서 아쉬웠던 부분을 수정할 수 있게된다.
우리는 위에서 가져온 date.getSeconds() 부분에서 padStart 함수를 사용하여 수를 변환할 것이다.
padStart은 string, 즉 문자열을 필요로 한다.
하지만 우리가 변환할 date.getSeconds()은 숫자열이기 때문에 이를 문자열로 변환할 필요가 있다.
이는 date.getSeconds()을 String으로 묶어주면 간단히 해결할 수 있다.
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);
이렇게 코드를 추가해주면 초 단위에서도 10초 아래의 숫자가 0을 붙여 표기된다.
