[JavaScript] 시계 만들기 (feat. setInterval, Date, padStart)

[바닐라 JS로 크롬 앱 만들기] 를 수강 후 정리한 내용입니다.

 

1. setInterval

• 첫 번째 인자에 반복적으로 실행할 함수를, 두 번째 인자에 시간을 넣으면 된다.
• 주기적으로 실행해야 할 함수가 있을 때 사용한다.

setInterval(func, ms) //ms마다 func을 실행한다

 

참고) setTimeout

• setInterval과 사용법은 동일하다.
• 다만, 일정 시간이 지나고 딱 한 번 수행해야 할 일이 있을 때 사용한다.

setTimeout(func, ms) //ms초가 지나고 func을 한 번 실행한다

 

 

2. Date 객체

• 자바스크립트에 내장되어 있는 객체로, 날짜를 표현할 때 사용한다.
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

const date = new Date(); //생성

date.getDate(); //일
date.getDay(); //요일(일-0, 월-1, ... 토-6)
date.getHours(); //현재 시
date.getMinutes(); //현재 분
date.getSeconds(); //현재 초

 

 

3. padStart

• 일정한 길이로 문자열을 채워야 할 때 사용한다.
• 현재 문자열을 기준으로 앞에 값을 채운다.

현재문자열.padStart(목표 문자열 길이, 채워 넣을 문자열);

const str = '123';
  
str.padStart(5, '0'); // "00123"
str.padStart(6, 'abcdef'); // "abc123"

 

참고) padEnd

• 현재 문자열을 기준으로 뒤에 값을 채운다.

const str = '123';
  
str.padEnd(5, '0'); // "12300"
str.padEnd(6, 'abcdef'); // "123abc"

 

 

4. 시계 만들기

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

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

const 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);

 

결과