Javascript 실시간 시계 만들기

⏰실시간 시간 구하기

난이도 ⭐
예제 Real Time Clock

new Date()

현재 날짜와 시간을 반환합니다.

const today = new Date();
console.log(today) // Tue Apr 28 2020 14:40:02 GMT+0900 (대한민국 표준시)

 

getMonth()

자바스크립트의 월은 0부터 시작하므로 1을 더해줘야 1~12월로 나옵니다.

const month = today.getMonth() + 1;

 

getDay()

요일 정보는 숫자로 이루어져 있습니다.
0 (일요일) ~ 6 (토요일)
2는 목요일이겠죠?

const day = today.getDay(); // 2

 

Intl.DateTimeFormat

언어에 따라 날짜와 시간 서식을 지원합니다.
숫자로 나오는 요일을 문자로 보여주기 위해 사용합니다. 옵션에 따라 다양하게 표현할 수 있습니다.

const options = { weekday : 'short' };
const day = new Intl.DateTimeFormat('en-us', options).format(today.getDay()); // Thu

 

두자리 수 만들기

4월 28일이라면 위의 코드대로만 작성하면 4-28 이런 식으로 나옵니다. 어떤 날짜와 시간 이든 공통 자릿수로 맞춰 주면 보기 더 좋겠죠? 그래서 숫자가 10 미만 일 때는 앞에 0이 붙도록 조건문을 작성합니다.
저는 앞에 0을 붙이는 함수를 만들어 사용했습니다.

1. 템플릿 리터럴 문법 내에서 삼항 연산자 사용

   
   const realtimeValue = document.querySelector('.realtime-value');
   
   realtimeValue.innerText = `${
   	month < 10 ? `0${month}` : month}-${
   	date < 10 ? `0${date}` : date}`;
   }
   

2. 별도 함수 만들기

   
   realtimeValue.innerText = `${year}-${addZero(month)}-${addZero(date)} ${day} ${addZero(hours)}:${addZero(minutes)}:${addZero(seconds)}`;
   
   function addZero(num) {
     num < 10 ? num = `0` + num : num;
     return num;
   }
   

 

setInterval(fn, milliseconds)

일정한 시간 간격으로 작업을 수행하는 함수입니다. 첫번째 인자는 실행할 함수이고 두번째 인자는 시간 간격을 넣습니다.

setInterval(getTime, 1000); // 1초 간격으로 getTime 함수를 실행