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

clock 만들기

 

1. setInterval(콜백함수, ms시간)

콜백함수를 시간 간격으로 반복해서 호출해준다

 

 

2. setTimeout(콜백함수, ms시간)

콜백함수를 일정 시간 이후 호출해준다 (반복x)

 

 

3. Date 클래스

 

3-1. new Date() : 현재 날짜~시간 정보를 가지고 있다.
3-2. new Date().getDate() : 현재 날짜

3-3. new Date().getDay() : 현재 요일

3-4. new Date().getHours() : 현재 시각

3-5. new Date().getMinutes() : 현재 분

3-6. new Date().getSeconds() : 현재 초

3-7. new Date().getFullYear() : 현재 년도 -> getYear() 아님!!

 

new Date()를 사용하여 시간을 나타내다보면 1자리 수 숫자의 경우 14 : 14 : 1 처럼 나오므로 이를 14 : 14 : 01 같이 만들고자 한다.

4. .string.padStart(원하는길이, '추가하고자하는문자') 사용하기 <-> padEnd(,)

"1".padStart(2, '0') ----> "01" 로 출력된다.

"14".padStart(2, '0') ----> "14" 그대로 출력 

즉, 해당 padStart() 함수는 주어진 문자열보다 길게 만들고 싶을 때 빈칸에 넣어줄 문자를 지정해주는 것이다.

 

const clock = document.getElementById('clock');

let getClock = function() {
  const date = new Date();
  
  const hour = String(date.getHours()).padStart(2, "0");
  const minute = String(date.getMinutes()).padStart(2, "0");
  const seconds = date.getSeconds().toString().padStart(2, "0");
  
  clock.innerText = `${hour} : ${minute} : ${seconds}`;
}

setInterval(getClock, 1000);