#5 [2021 UPDATE] CLOCK

#5.0 Intervals

const date = new Date();

new Date(); 를 이용해서 현재 월/일/시/분/초 등 다양한 값을 구할 수 있다

 

#5.1 Timeouts and Dates 

const clock = document.querySelector("h2#clock");

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

    let hour = addZero(date.getHours());
    let minute = addZero(date.getMinutes());
    let second = addZero(date.getSeconds());


    let time = `${hour}:${minute}:${second}`;
    clock.innerText = time;
}

function addZero(time){
    if(time < 10) {
        time = "0" + time;
    }
    return time;
}

getClock();
setInterval(getClock, 1000);

#5.2 PadStart

padStart() 와 padEnd(); 
둘 다 string 타입의 변수에만 적용이 가능하다.

const clock = document.querySelector("h2#clock");

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

    let h = (date.getHours() + "").padStart(2, "0");
    let m = (date.getMinutes() + "").padStart(2, "0");
    let s = (date.getSeconds() + "").padStart(2, "0");

    let t = `${h}:${m}:${s}`;

    clock.innerText = t;
}

getClock();
setInterval(getClock, 1000);

덕분의 코드가 더 짧아진 것 같다

number 타입의 변수를 string으로 변환하는 방법은 
그냥 String( ... ) 으로 감싸기

const clock = document.querySelector("h2#clock");

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

    let h = String(date.getHours()).padStart(2, "0");
    let m = String(date.getMinutes()).padStart(2, "0");
    let s = String(date.getSeconds()).padStart(2, "0");

    let t = `${h}:${m}:${s}`;

    clock.innerText = t;
}

getClock();
setInterval(getClock, 1000);