[22/02/10] 시계 만들기 interval 과 timeout

Interval

: 매번 일어나야 하는 것
setInterval(함수,ms) : ms마다 함수 실행

const clock = document.querySelector('#clock')
//함수를 2초마다 실행 setInterval(funtion,2000)
//milliseconds
function sayHello(){
    console.log('hello');  
}
setInterval(sayHello,5000)

Timeout

: 기다렸다 실행
setTimeout(함수,ms) : ms 기다렸다 함수 실행

new Date();

: 자바스크립트에서 제공해주는 date 함수
console.log(date.getDate);

padStart()

: String에 사용 할 수 있는 자바스크립트 함수
"문자".padStart(문자길이,앞에추가할문자)
"1".padStart(2,"0") : 길이가 2가 아니라면 0을 앞에 붙여줌(뒤에 추가할 때는 padEnd()사용)

String 으로 변환

new Date().getHours()
-> String(new Date().getHours())

시계 완성!

const clock = document.querySelector('#clock')

function getClock(){
    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.innerHTML =`${hours} : ${minutes} : ${seconds}`;
    
    
    
}
//바로 실행되게 ()로 실행해줌 (즉시 호출)
getClock();
setInterval(getClock,1000)