자바스크립트 시계기능만들기 setInterval, setTimeout, padStart

setInterval

interval은 '매번' 일어나는 무언가를 말함

매 2초마다 무슨일이 일어나게 하고 싶을때 사용하는게 interval 함수

setInterval()은 2개의 argument를 받는다.

첫번째 argument는 내가 실행하고자 하는 function

두번재 argument는 호출되는 function 간격을 몇 ms(milliseconds)로 할지 결정하면 됨

 

setInterval(sayHello,5000) //sayHello함수가 5초마다 실행됨.

setTimeout

만약 기다렸다가 실행하고 싶으면?

setTimeout()함수 이용

setTimeout(sayHello, 5000); //sayHello함수가 5초후에 실행됨

padStart

string에 쓸 수 있는 function 함수임.
현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환함. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됨.

내가 가지고 있는 string보다 길게 만들어야할때 사용

"1".padStart(2,"0")
//"1" (string)의 길이를 2로 만드는데,  
//만약 그 string의 길이가 2가 아니면 앞쪽에 "0"을 추가하도록 함
//padEnd는 뒤쪽에 문자를 추가한다

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

//매 초마다 새로운 Object생성
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.innerText = `${hours} : ${minutes} : ${seconds}`;
}

 getClock();
 setInterval(getClock,1000)
//setTimeout(sayHello,5000)

출력성공