바닐라 JS로 크롬 앱 만들기 (#5 CLOCK)

 

 

Intervals

- 주기적으로 설정한 행동이 실행되도록 해준다.

 

clock.js

function sayHello(){
    console.log("hello");
}

// 실행하려는 함수, 몇 ms 간격으로 할지  
setInterval(sayHello, 5000); // 5초마다 sayHello 함수 호출
setTimeout(sayHello, 5000); // 5초 뒤 sayHello 함수 호출(한번만 실행)

 

Timeouts and Dates

clock.js

function getClock() {
    const date = new Date();
    clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}

// 웹 사이트가 load 되자마자 getClock 함수를 실행
getClock(); 

setInterval(getClock, 1000);	// 1초마다 실행

 

PadStart

위에서 숫자 0~9 일 때 00~09 로 출력되도록 padStrart 사용

 

"String".padStart(2, "0"); → "String"의 길이가 2가 되지 않는다면 앞에 0을 부족한 만큼 추가한다

// number를 String으로 만들려면 String()으로 감싸준다
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}`;
}

 

뒤에 붙이려면 padEnd 를 사용하면 된다.

 

 

 

' 노마드 코드 - 
바닐라 JS로 크롬 앱 만들기' 공부하면서 정리한 내용입니다.