JavaScript_크롬 앱 만들기

2. Clock

1) interval?

interval : 매번 일어나는 것!
ex) 2초마다 일어나는 것

setInterval(실행함수,밀리초);
// ex) setInterval(getTime,1000);
// 1초마다 시간이 흘러갈 수 있게함

2) timeout?

timeout : 일정시간이 흐른 후 딱 한번 호출

setTimeout(실행함수,밀리초);
// ex) setTimeout(getTime,1000);
// 1초 후 한번 getTime 함수를 실행함

Date object

const date = new Date();
cosnt hours = date.getHours();				// 시간
const minutes = date.getMinutes();			// 분
const seconds = date.getSeconds();			// 초

-> 이렇게 사용하면 한자리 수일 때 한자리수로 나옴
ex) 3시 1분 -> 3:1 (보기에 좋지 않음)

3) padStart

string의 자리수를 원하는대로 맞춰줄 수 있음

"1".padStart(2,"0");
// "1"이 2자리가 아니라면 "0"을 앞에 추가해라

<-> padEnd

"1".padEnd(2,"0");
// "1"이 2자리가 아니라면 "0"을 뒤에 추가해라

function getClock(){
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0"); // String으로 변환시켜주어야 함
    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);  // 1초 마다 새로고침 됨