首頁 > web前端 > js教程 > 主體

如何在 JavaScript 中實作 Stack Exchange 的時間顯示格式?

Patricia Arquette
發布: 2024-11-08 09:03:02
原創
240 人瀏覽過

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

格式化時間:複製Stack Exchange 的時間顯示

顯示自給定時間點以來經過的時間的需要在Web 應用程式中很常見。許多流行的網站(例如 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!