노마드 코더 JS | #5 Clock

#5.0 Intervals 5분

 

심플한 작업임

h1 #clock을 받아와서 text를 변경해주면 됨

        <h2 id="clock"></h2>

=> function을 5초마다 실행시키는 것

 

* interval

매 interval 마다 실행시키고 싶을 때 사용하는 개념

setInterval를 이용한다.

setInterval(function, milliseconds);

// interval
function sayHello(){
    console.log("hello");
}
setInterval(sayHello, 5000);

 

#5.1 Timeouts and Dates 8분

* timeout 개념

=> 잠시 기다렸다가 한 번만 실행시키는 것

setTimeout(function, milliseconds); 

 

* Date object를 활용해서 시각을 나타낸다. 

new Date()
Tue Feb 22 2022 14:48:14 GMT+0900 (한국 표준시)

Date - JavaScript | MDN (mozilla.org)

 

const date = new Date();
date.getDate();
date.getDay();
date.getMonth();
date.getFullYear();
date.getHours();
date.getMinutes();

 

이렇게 하면 된다

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

// interval
function sayHello(){
    const date = new Date();
    clock.innerText = `${date.getHours()} : ${date.getMinutes()}:${date.getSeconds()}`;
}
sayHello();
setInterval(sayHello, 1);

 

 

#5.2 PadStart 7분

* padStart(character length, add a character)

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

// interval
function sayHello(){
    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}`;
}
sayHello();
setInterval(sayHello, 1);

#5.3 Recap 4분

- get time : date object

- padStart

- setInterval : update time