>웹 프론트엔드 >JS 튜토리얼 >JavaScript로 Stack Exchange의 시간 표시 형식을 구현하는 방법은 무엇입니까?

JavaScript로 Stack Exchange의 시간 표시 형식을 구현하는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-11-08 09:03:02302검색

How to Implement Stack Exchange's Time Display Formatting in JavaScript?

이후 시간 형식 지정: Stack Exchange의 시간 표시 복제

웹 애플리케이션에서는 특정 시점 이후 경과 시간을 표시하는 것이 일반적입니다. . Stack Exchange와 같은 많은 인기 웹사이트에서는 "4분 전" 또는 "1년 전"과 같이 이후 시간을 표시하기 위해 간결하고 유익한 형식을 사용합니다. JavaScript에서 유사한 형식 지정 방법을 구현하면 개발자는 과거 이벤트를 참조하는 사용자 친화적이고 직관적인 방법을 제공할 수 있습니다.

이를 달성하기 위해 JavaScript에 내장된 Date 개체와 간단한 계산을 활용하여 경과된 이벤트를 확인할 수 있습니다. 둘 사이의 시간 날짜.

구현:

function timeSince(date) {
  var seconds = Math.floor((new Date() - date) / 1000);

  var interval = seconds / 31536000;

  if (interval > 1) {
    return Math.floor(interval) + " years";
  }
  interval = seconds / 2592000;
  if (interval > 1) {
    return Math.floor(interval) + " months";
  }
  interval = seconds / 86400;
  if (interval > 1) {
    return Math.floor(interval) + " days";
  }
  interval = seconds / 3600;
  if (interval > 1) {
    return Math.floor(interval) + " hours";
  }
  interval = seconds / 60;
  if (interval > 1) {
    return Math.floor(interval) + " minutes";
  }
  return Math.floor(seconds) + " seconds";
}

사용:

var aDay = 24 * 60 * 60 * 1000;
console.log(timeSince(new Date(Date.now() - aDay))); // "1 day ago"
console.log(timeSince(new Date(Date.now() - aDay * 2))); // "2 days ago"

이 함수는 현재 날짜와의 차이를 계산합니다. 시간과 지정된 날짜를 입력한 다음 초부터 초까지의 범위에서 경과 시간을 기준으로 문자열로 형식을 지정합니다. 년. 이 기능은 경과 시간을 다양한 간격으로 나누고 그 결과를 가장 가까운 정수로 반올림하는 방식으로 작동합니다.

이 방법을 구현하면 개발자는 경과 시간을 일관되고 사용자 친화적인 형식으로 쉽게 표시하여 사용자 경험을 향상시킬 수 있습니다. 웹 애플리케이션 중

위 내용은 JavaScript로 Stack Exchange의 시간 표시 형식을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.