11. Momentum 만들기 2 - 시간 출력 최적화

2단계 시계 최적화

1. 시간이 흘러가도록 수정
2. 시, 분, 초의 값이 10 이하 일경우 0 을 붙여줌
3. 삼항 연산자를 사용하여 니꼬쌤의 설명대로 Sexy Code를 만들기 위함

키워드1 삼항 연사자

• 구문: 조건 ? expr1 : expr2
• 설명: condition이 true이면, 연산자는 expr1의 값을 반환하며, 반대의 경우 expr2를 반환

키워드2 setInterval

• setTimeout()은 일정 시간이 지난 후 코드를 한 번 실행해야 할 때 사용. 그러나 애니메이션의 경우와 같이 코드를 반복해서 실행해야 할 경우에는 setInterval()를 사용
• 구문: setInterval(code, [delay]);
• code: 함수. delay밀리 초 마다 실행
• delay: 타이머 미리초

전체코드

'use strict';

const clockContainer = document.querySelector('.js-clock');
const clockTitle = clockContainer.querySelector('.js-title');

function getTime() {
    const date = new Date();

    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    //10이하의 숫자에 '0'을 삽입
    clockTitle.innerHTML = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${
        seconds < 10 ? `0${seconds}` : seconds
    }`;
}

function init() {
    getTime();
    //시간이 흘러가도록 setInterval() 사용
    setInterval(getTime, 1000);
}

init();

1. 결과

결과 이미지