[JavaScript] 밀리초 일, 시, 분, 초 계산하기 (D-day 기능 구현)

D-day 기능을 구현하면서 밀리초 계산이 헷갈렸다.

우선 변수 setDate와 변수 nowDate를 new Date() 객체를 통해 날짜 데이터를 저장하고,

const setDate = new Date("2022-09-25T00:00:00+0900");
const nowDate = new Date();

 

 

아래 코드를 통해 계산할 날의 밀리초를 변수 distance에 넣었다.

const distance = setDate.getTime() - nowDate.getTime();

 

 

이제 밀리초를 어떻게 일, 시, 분, 초로 표현할까?

우선 계산 방법은 아래와 같다.

계산할 날의 밀리초 / (1000 * 60 * 60 * 24) = 일
(계산할 날의 밀리초 / (1000 * 60 * 60)) % 24 = 시
(계산할 날의 밀리초 / (1000 * 60)) % 60 = 분
(계산할 날의 밀리초 / 1000) % 60 = 초

 

* 1000ms는 1초이다. 

1000 = 1초

1000 * 60 = 1분

1000 * 60 * 60 = 1시간

1000 * 60 * 60 * 24 = 1일

 

 

1️⃣ 일 계산

1000 * 60 * 60 * 24는 1일(86,400,000)이다.

밀리초를 1일(86,400,000)로 나눴으니 일 단위로 계산이 될 것이다.

 

 

2️⃣ 시 계산

1000 * 60 * 60은 1시간(3,600,000)이다.

밀리초를 1시간(3,600,000)으로 나눴으니 시간 단위로 계산이 되고,

24로 나눈 나머지를 구하면 24를 넘지 않는 시 단위가 계산이 될 것이다.

 

 

3️⃣ 분 계산

1000 * 60은 1분(60,000)이다.

밀리초를 1분(60,000)으로 나눴으니 분 단위로 계산이 되고,

60을 나눈 나머지를 구하면 60을 넘지 않는 분 단위가 계산이 될 것이다.

 

 

4️⃣ 초 계산

1000은 1초이다.

밀리초를 1초(1,000)으로 나눴으니 초 단위로 계산이 되고,

60을 나눈 나머지를 구하면 60을 넘지 않는 초 단위가 계산이 될 것이다.

 

 

따라서, 아래와 같이 작성하면 D-day 기능을 구현할 수 있다.

const day = String(Math.floor(distance / (1000 * 60 * 60 * 24))).padStart(3, "0");
const hours = String(Math.floor((distance / (1000 * 60 * 60)) % 24)).padStart(2, "0");
const minutes = String(Math.floor((distance / (1000 * 60)) % 60)).padStart(2, "0");
const seconds = String(Math.floor((distance / 1000) % 60)).padStart(2, "0");

- padStart(문자열 길이, "문자")

  * padStart(3, "0") : 문자열 길이가 3 미만이면 문자열 길이가 3이 될 때까지 앞에 "0"으로 채운다.