JavaScript Date - getTime()를 이용하여 날짜 계산, SNS처럼 글 작성 시간 표시 - 지난 시간 계산

SNS에서 작성된 게시글을 보면 작성된 날짜가 "방금 전", "10초 전", "1분 전", "1시간 전", "1일 전", "10일 전"처럼 작성 날짜를 기준으로 지난 시간을 계산하여 표시되는 것을 볼 수 있습니다.

​

SNS처럼 작성 날짜를 기준으로 지난 시간을 계산하는 함수를 생성하겠습니다.

​

​

getTime() 메서드

​

Date 객체의 getTime() 메서드는 1970년 1월 1일 00시 00분 00초 UTC를 기준으로 경과 한 밀리초를 반환합니다.

var today = new Date();
var writeDate = new Date("2022-03-13 15:23:37");

console.log(today.getTime());
--> 1647233149748
console.log(writeDate.getTime());
--> 1647152617000

 

현재 닐짜(2022-03-14 13:45:49.748)에서 작성된 날짜(2022-03-13 15:23:37)를 빼고 밀리초로 나누면 지나간 시간(초)이 계산됩니다. 초를 분, 시, 일로 나누어서 계산하면 됩니다.

var elapsedTime = Math.trunc((today.getTime() - writeDate.getTime()) / 1000);

console.log(elapsedTime);
--> 80532

 

 

지난 시간 계산 함수 생성

​

현재 시간을 기준으로 작성 날짜가 1초 전이면 "방금 전"으로 1분 전이면 "00초 전"으로 1시간 전이면 "00분 전"으로 1일 전이면 "00시간 전"으로 15일 전이면 "00일 전"으로 15일 이후에는 작성 날짜로 변환하여 가져오는 함수입니다.

function elapsedText(date) {
	// 초 (밀리초)
	const seconds = 1;
	// 분
	const minute = seconds * 60;
	// 시
	const hour = minute * 60;
	// 일
	const day = hour * 24;
	
	var today = new Date();
	var elapsedTime = Math.trunc((today.getTime() - date.getTime()) / 1000);
	
	var elapsedText = "";
	if (elapsedTime < seconds) {
		elapsedText = "방금 전";
	} else if (elapsedTime < minute) {
		elapsedText = elapsedTime + "초 전";
	} else if (elapsedTime < hour) {
		elapsedText = Math.trunc(elapsedTime / minute) + "분 전";
	} else if (elapsedTime < day) {
		elapsedText = Math.trunc(elapsedTime / hour) + "시간 전";
	} else if (elapsedTime < (day * 15)) {
		elapsedText = Math.trunc(elapsedTime / day) + "일 전";
	} else {
		elapsedText = SimpleDateTimeFormat(date, "yyyy.M.d");
	}
	
	return elapsedText;
}

SimpleDateTimeFormat() 함수는 "replace() 메서드를 사용하여 날짜, 시간을 문자열로 변환"(https://carrotweb.tistory.com/160?category=1051221)를 참고하시기 바랍니다.

 

​

함수를 사용하여 지난 시간을 계산해 보겠습니다.

// 현재 시간 2022-03-13 15:23:37
var writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 방금 전

// 현재 시간 2022-03-13 15:24:10
var writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 33초 전

// 현재 시간 2022-03-13 15:25:05
var writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 1분 전

// 현재 시간 2022-03-13 16:03:05
var writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 39분 전

// 현재 시간 2022-03-13 17:11:14
var writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 1시간 전

// 현재 시간 2022-03-15 10:24:37
var writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 1일 전

// 현재 시간 2022-04-10 06:33:50
var writeDate = new Date("2022-03-13 15:23:37");
console.log(elapsedText(writeDate));
--> 2022.3.13

 

만약, "방금 전"을 작성 날짜를 기준으로 10초 까지 보여 주고 싶으시면 조건을 변경하면 됩니다.

if (elapsedTime < (seconds + 10)) {
	elapsedText = "방금 전";
}

 

다양하게 조건을 변경해서 사용하시기 바랍니다.