자바스크립트 경과시간 구하기 - jabaseukeulibteu gyeong-gwasigan guhagi

자바스크립트 경과시간 구하기 - jabaseukeulibteu gyeong-gwasigan guhagi

유명 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

자바스크립트 경과시간 구하기 - jabaseukeulibteu gyeong-gwasigan guhagi
코드
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' 카테고리의 다른 글

[복합] 웹개발에서 사용하는 길이 체크하는 문법정리  (1) 2018.07.31
[Js] JSON 키,값을 쉽게 추가(add) 및 삭제(delete) 하기  (0) 2018.07.27
[Js] 대문자에서 소문자로 (또는 반대로) 변경하는 방법  (0) 2018.07.12
[Js] substring, substr, indexOf, lastIndexOf (javascript 문자열 자르기, 뒤에서 자르기, 찾기)  (0) 2018.07.12
[Js] 파일첨부에 이미지만 첨부할 수 있도록 처리 input file  (0) 2018.07.11

특정 날짜와 오늘 날짜 사이의 시간 구하기 (feat. D-day 계산기)

getTime()

  • 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환
  • 1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)을 나타내는 숫자
  • 결과값이 밀리 초 단위로 나오기 때문에 변환해주어야함
const date = new Date();
const HappyNewYear = new Date("2023-01-01T00:00:00");
const Dday = HappyNewYear.getTime()-date.getTime(); 

// 22026379074 <- 2022-04-21 기준

변환하는 법

초 : Dday / 1000 (ms단위)

분 : Dday / 1000 * 60 (60초)

시 : Dday  / 1000 * 60 * 60 (60분)

일 : Dday  / 1000 * 60 * 60 * 24 (24시간)

ex) 시간을 구한다면? 

먼저 Dday에서 일(Dday  / 1000 * 60 * 60 * 24)을 나눈 후 나머지를 시간(1000 * 60 * 60)으로 나누기!

(소수점 처리를 위해 Math.floor() 필요)

* Math.floor() : 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환

참고링크

https://horangi.tistory.com/396