[바닐라JS로 크롬 앱 만들기] Making a JS Clock part Two

[출처-유튜브 노마드 코더 Nomad Coders]

https://youtu.be/jstjlCZa7nA

 

setInterval(fn, 1000)

첫 번째 인자는 함수, 두 번째 인자는 실행할 시간 간격(millisecond)이다

 

3초 간격으로 'say hi'가 실행된다.

 

 

const clockContainer = document.querySelector(".js-clock"),
    clockTitle = clockContainer.querySelector("h1");

function getTime(){
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}

function init(){
    getTime();
    setInterval(getTime, 1000);
}

init();

 

 

 

-삼항연산자 사용하기

${seconds < 10 ? `0${seconds}` : seconds}`

const clockContainer = document.querySelector(".js-clock"),
    clockTitle = clockContainer.querySelector("h1");

function getTime(){
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${hours}:${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
    
}

function init(){
    getTime();
    setInterval(getTime, 1000);
}

init();

원래는 이랬었는데

이렇게 바뀜

 

 

const clockContainer = document.querySelector(".js-clock"),
    clockTitle = clockContainer.querySelector("h1");

function getTime(){
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
        minutes < 10 ? `0${minutes}` : minutes
    }:${seconds < 10 ? `0${seconds}` : seconds}`;
    
}

function init(){
    getTime();
    setInterval(getTime, 1000);
}

init();

 

시, 분에도 똑같이 적용해줌