📍 Javascript를 공부했을 때 학습노트에 정리해둔 것을 옮겨왔다.
이 함수가 하는 것은 두 인자값(argument)을 받는데, 첫번째 인자로 실행할 function 함수를 받고, 두번째 인자로 그 함수를 실행하고 싶은 시간(실행할 시간)을 받는다.
function init() {
getTime();
setInterval(getTime, 1000);
// 1초 마다 업데이트 되도록 설정함.
}
init();
여기서 60초가 지나면 초가 한자리 숫자로 넘어가는 것을 볼 수 있다. 한자리 숫자 앞에 0을 붙이기 위해 삼항연산자를 써보자.
function getTime() {
const date = new Date();
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
clockTitle.innerText = `${hours}:${minutes}:${seconds < 9 ? `0${seconds}`: seconds}`;
}
따로 if 식을 빼지 않고, clockTitle.innerText 안의 { }에 조건을 넣어주었다. 매우 유용하고 간편한 방법.
{seconds < 10 ? `0${seconds}`: seconds}
만약(if) 초가 10보다 작으면(참이면) 0${seconds} 을 실행할 것이고, 그렇지 않으면(거짓이면) seconds(디폴트 값)를 실행할 것이라는 뜻.
시(hours), 분(minutes), 초(seconds)에 모두 적용해보자.
clockTitle.innerText =
`${hours < 10 ? `0${hours}`: hours}:${minutes < 10 ? `0${minutes}`: minutes}:${seconds < 9 ? `0${seconds}`: seconds}`;