Javascript 경과시간 - javascript gyeong-gwasigan

유명 SNS 게시물을 보면 작성 날짜 항목에 "방금 전", "몇분 전", "몇시간 전", "몇일 전"...처럼 현재 시간을 기준으로 작성 날짜의 경과시간을 계산하여 표시해주는 코드를 제작해보도록 하겠습니다.

참고자료

https://gurtn.tistory.com/113

[JS] 두 날짜 사이의 일수 구하기

코드 const getDateDiff = (d1, d2) => { const date1 = new Date(d1); const date2 = new Date(d2); const diffDate = date1.getTime() - date2.getTime(); return Math.abs(diffDate / (1000 * 60 * 60 * 24));..

gurtn.tistory.com

코드

function elapsedTime(date) {
  const start = new Date(date);
  const end = new Date(); // 현재 날짜
  
  const diff = (end - start); // 경과 시간
 
  const times = [
    {time: "분", milliSeconds: 1000 * 60},
    {time: "시간", milliSeconds: 1000 * 60 * 60},
    {time: "일", milliSeconds: 1000 * 60 * 60 * 24},
    {time: "개월", milliSeconds: 1000 * 60 * 60 * 24 * 30},
    {time: "년", milliSeconds: 1000 * 60 * 60 * 24 * 365},
  ].reverse();
  
  // 년 단위부터 알맞는 단위 찾기
  for (const value of times) {
    const betweenTime = Math.floor(diff / value.milliSeconds);
		
    // 큰 단위는 0보다 작은 소수 단위 나옴
    if (betweenTime > 0) {
      return `${betweenTime}${value.time} 전`;
    }
  }
  
  // 모든 단위가 맞지 않을 시
  return "방금 전";
}

elapsedTime("2022-06-15");

코드 풀이

function elapsedTime(date) {
  const start = new Date(date);
  const end = new Date(); // 현재 날짜
  
  const diff = (end - start); // 경과 시간 구하기

경과시간을 구하기 위해서는 비교할 날짜와 현재 날짜가 필요로 합니다. 그러므로 함수 파라미터 값으로 비교할 날짜 정보를 받아와 줍니다. 그다음 현재 날짜와 비교할 날짜 사이의 경과 시간 값을 구해줍니다.

const times = [
  { time: "분", milliSeconds: 1000 * 60 },
  { time: "시간", milliSeconds: 1000 * 60 * 60 },
  { time: "일", milliSeconds: 1000 * 60 * 60 * 24 },
  { time: "개월", milliSeconds: 1000 * 60 * 60 * 24 * 30 },
  { time: "년", milliSeconds: 1000 * 60 * 60 * 24 * 365 },
].reverse();

// 아래 코드를 위해서는 (년 ~ 분) 순서여야함

이제 "몇분 전", "며칠 전" 등과 같은 시간을 표시하기 위해서 배열에 차례대로 시간 명칭과 해당하는 밀리초 값을 구분 지어 작성해줍니다. 

해당 코드는 가독성을 위해서 (분~년) 순서로 값을 작성하였지만, 이후 작성할 코드를 위해서는 큰 단위에서 작은 단위(년~분) 순서여야 합니다. 이를 구현하기 위해서 배열을 뒤집어주었습니다. (reverse 메서드)

// 년 단위부터 알맞는 단위 찾기
for (const value of times) {
  const betweenTime = Math.floor(diff / value.milliSeconds);
  
  // 큰 단위는 0보다 작은 소수점 값이 나옴
  if (betweenTime > 0) {
    return `${betweenTime}${value.time} 전`;
  }
}

// 모든 단위가 맞지 않을 시
return "방금 전";

위에서 미리 작성해둔 시간 단위에 따라 차례대로 큰 단위부터 작은 단위까지 반복문을 돌려줍니다. 이때 미리 구해둔 경과시간에 밀리초 값을 나눠서 비교 값을 구해줄 수 있습니다. 해당 단위 밀리초 값보다 경과시간이 적을 시, 0보다 작은 소수점 값이 나오게 됩니다. ( 1분 / 1년 같은 상황.. )

값이 나오지 않는다면, 다음 작은 단위로 넘어가서 다시 비교해줍니다. 만약 (5분 / 1분) 같은 상황이 나오게 되어서 소수점 값이 아닌 정수 값이 나오게 되면, 반복문을 멈추고 구한 비교 값에 시간 명칭을 붙여서 반환해줍니다.

마지막 분단위에서도 결과가 나오지 않는다면 더 이상 비교가 불가능하다고 판단하고 "방금 전"이라는 문자를 반환해줍니다.

자바스크립트에서 경과시간 구하기

var old = new Date().getTime();

var now = new Date().getTime();

var sec_gap = (now - old) / 1000;

var min_gap = (now - old) / 1000 /60;

저작자표시

'웹개발 > Js & Jquery' 카테고리의 다른 글

개발자의 끄적끄적

[Javascript] 날짜 및 시간 설정, 경과 시간 계산, 비교 [펌]

Date 개체를 사용하여 날짜 비교 및 경과 시간 계산을 할 수 있다.

1. 날짜를 현재 날짜로 설정

- 날짜를 지정하지 않고 Date개체의 인스턴스를 만들면, 연도, 월, 일, 시, 분, 초 및 밀리초를 포함하는 현재 날짜와 시간을 나타내는 값을 반환한다.

- 예제 코드

2. 특정 날짜 설정

- 생성자에 날짜 문자열을 전달하여 특정 날짜를 설정할 수 있다.

- 특정 날짜 생성하기

3. 연, 월, 일 더하기 및 빼기

- Date 개체의 getX 및 setX 메서드를 사용하여 특정 날짜 및 시간을 설정할 수 있다.

- 예제코드1

- 특정 날짜 생성하여 한 달 전 날짜 구하기

4. 요일 사용

- getDay 메서드는 요일을 0(일요일)에서 6(토요일)까지의 숫자로 가져온다.

- getDate 메서드는 월의 일을 1에서 31까지의 숫자로 가져온다.

5. 경과된 시간 계산

- getTime 메서드는 1970년 1월 1일 자정을 기준으로 경과된 시간(밀리초)을 반환한다. 날짜가 이 날짜 이전이면 음수를 반환.

- getTime 메서드를 사용하여 경과된 시간을 계산하는 데 필요한 시작 시간과 종료 시간을 설정할 수 있다. 그래서 몇 초 정도의 짧은 시간이나 며칠에 달하는 긴 시간을 측정할 때 사용할 수 있다.

- 경과된 시간을 밀리초(ms) 단위로 가져온다.

- 사용자의 나이 확인 예제

6. 날짜 비교

- JavaScript에서 날짜를 비교할 때 == 연산자는 연산자 양쪽의 날짜가 동일한 개체를 참조하는 경우에만 true를 반환한다.

- 따라서 별도의 두 Date 개체가 동일한 날짜로 설정된 경우 date1 == date2는 false를 반환합니다.