자바스크립트 Date객체의 getTime() 메서드는 1970년 1월 1일 자정
즉, 1970/01/01 00:00:00 부터 해당 Date객체까지의 흐른 시각을 밀리초로 표시해준다.
1970년 1월 1일 00:00:05 의 getTime() 값은 5,000 이다. (1초는 1000밀리초이다.)
getTime() 메서드는 절대적인 시간 값을 리턴해주기 때문에,
이 값을 통해 두 날짜 사이의 시간 차이를 계산 할 수 있다.
자세히 살펴보자.
두 날짜의 일 수 차이 구하기
const now = new Date("2022-05-01");
const specialDay = new Date("2022-05-31");
const inMs = specialDay.getTime() - now.getTime();
console.log(`두 날짜의 차이는 ${inMs / (1000 * 60 * 60 * 24)}일 이다.`);우선, 두 날짜에 대한 객체를 생성한다.
그리고 각 객체에 대한 getTime() 메서드의 결과 값을 빼주어야 한다.
이렇게 되면 InMs 변수에 두 날짜의 시간 차이 값이 저장된다.
(당연하게도 이 값 또한 밀리초 단위의 시간 값이다.)
1초는 1000 밀리초이고,
1분은 60초와 같으므로, 1000 * 60 = 60,000 밀리초,
1시간은 60분과 같으므로, 1000 * 60 * 60 = 3,600,000 밀리초,
1일은 24시간과 같으므로, 1000 * 60 * 60 * 24 = 86,400,000 밀리초 이다.
따라서 일 수를 구하려면 InMs 변수에 86,400,000 이라는 값을 빼주면 된다.
하지만, 이렇게 하면 코드의 가독성이 떨어지고 나중에 수정하기도 어려우므로
InMs 변수에 (1000 * 60 * 60 * 24)을 나눠준다.
결과는 다음과 같다.
console.log(`두 날짜의 차이는 ${inMs / (1000 * 60 * 60 * 24)}일 이다.`);
원하는 답이 나왔다.
이런 방식으로 두 날짜의 일 수차이 뿐만 아니라 현재 시각과 특정 날짜에 대한 일 수 차이를 구할 수 있다.
다만, 두 날짜간 시간 차이가 있을 경우 소수점 이하의 값이 나오기 때문에
깔끔한 값을 위해 Math.floor() 함수를 이용하여 소수점 값을 버려준다.
특정 날짜가 되기까지 남은 일 수, 시간, 분, 초 표시 하기
앞에서는 남은 일 수까지만 계산해보았다.
일 뿐만 아니라 시간, 분, 초까지 계산하기 위해선 계산이 더 필요하다.
InMs 값에 (1000 * 60 * 60 * 24) 를 나눠주면 일 수를 구할 수 있다는 것은 이해했을 것이다.
그렇다면, 시간을 구하기 위해서 단순히 60을 더 나눠주면 될까?
아니다, 일 수에 해당하는 밀리초 값을 빼주어야 한다.
위의 예시 코드에서 inMs에 있는 값은 세분화 해보면
(남은 일 수 * (1000 * 60 * 60 * 24)) + (남은 시간 * (1000 * 60 * 60))
+ (남은 분 * (1000 * 60)) + (남은 초 * (1000)) 로 나타낼 수 있다.
따라서 남은 시간을 계산하기 위해서(남은 일 수 * (1000 * 60 * 60 * 24)) + (남은 시간 *(1000 * 60 * 60))
+ (남은 분 * (1000 * 60)) + (남은 초 * (1000))
남은 일 수를 뺀 값에 (1000 * 60 * 60)를 나누어야 한다.
코드로 보면 이렇다.
const now = new Date();
const specialDay = new Date("2022-05-31T00:00:00");
const inMs = specialDay.getTime() - now.getTime();
const days = Math.floor(inMs / (1000 * 3600 * 24));
const daysExcepted = inMs % (1000 * 3600 * 24);
const hours = Math.floor(daysExcepted / (1000 * 3600));
console.log(
`${days}일 ${hours}시간 남았습니다.`
);
days 변수에 남은 일수를 저장하고,
daysExcepted 변수에 남은 일수의 밀리초 값을 뺀 나머지 값을 저장한다.
이 값에 (1000 * 60 * 60)를 나누고,
hours 변수에 남은 시간을 저장한다.
전체 코드
이와 같은 로직으로 현재 시간(2022/04/24 오전 2시 53분)과
5월 5일까지의 남은 시간을 나타내보았다.
const specialDay = new Date("2022-05-05T00:00:00");
const specialMs = specialDay.getTime();
function getUntilTime(nowMs, specialMs) {
const inMs = specialMs - nowMs;
const days = Math.floor(inMs / (1000 * 3600 * 24));
const daysExcepted = inMs % (1000 * 3600 * 24);
const hours = Math.floor(daysExcepted / (1000 * 3600));
const hoursExcepted = daysExcepted % (1000 * 3600);
const mins = Math.floor(hoursExcepted / (1000 * 60));
const minsExcepted = hoursExcepted % (1000 * 60);
const secs = Math.floor(minsExcepted / 1000);
const daysInStr = String(days);
const hoursInStr = String(hours).padStart(2, "0");
const minsInStr = String(mins).padStart(2, "0");
const secsInStr = String(secs).padStart(2, "0");
const remainingTime = `${daysInStr}일 ${hoursInStr}시간 ${minsInStr}분 ${secsInStr}초 남았습니다.`;
return remainingTime;
}
function getTimeUntilChris() {
const now = new Date(),
nowMs = now.getTime();
console.log(getUntilTime(nowMs, specialMs));
}
getTimeUntilChris();
setInterval(getTimeUntilChris, 1000);
남은 시간이 setInterval 함수를 통해 1초마다 콘솔에 찍히는 모습을 볼 수 있다.
잘못된 부분에 대한 지적이나 개선점 등은 댓글로 남겨주시면 감사하겠습니다.
