在JavaScript中獲取日期間的相對時間戳差值


您是否在任何網站上見過顯示時間戳的通知?它會顯示類似“12分鐘前”、“2天前”、“10小時前”等資訊。這與兩個日期或時間之間的時間戳差值有關。

此外,一些應用程式會顯示該裝置上次登入時間是22小時前。因此,獲取兩個日期之間的時間戳差值有很多用途。

在本教程中,我們將學習獲取兩個日期之間相對時間戳差值的幾種方法。

使用getTime()方法和日期建立自定義演算法

在JavaScript中,我們可以使用new Date()建構函式建立一個日期物件。此外,我們可以將特定日期作為Date()建構函式的引數,以該日期值初始化日期物件。

getTime()方法返回從1970年1月1日到當前日期的總秒數。因此,我們可以找到兩個日期的總毫秒數,並將它們相減以獲得毫秒差。使用該毫秒數,我們可以找到以秒、分鐘、年等為單位的時間戳差值。

語法

使用者可以按照以下語法獲取兩個日期之間的相對時間戳差值。

let second_diff = (current_date.getTime() - previous_date.getTime())/1000; 

在上例語法中,current_date和pervious_date是兩個不同的日期。我們使用getTime()方法獲取兩個日期之間的毫秒差。

注意 − 透過將second_diff變數的值與毫秒數進行比較,您可以獲得相對時間戳差值。

步驟

使用者可以按照以下步驟查詢以天、月、年等不同單位表示的兩個日期之間的相對時間戳。

步驟1 − 建立兩個不同的日期。

步驟2 − 使用getTime()方法獲取兩個日期的總毫秒數,並計算它們的差值。此外,將毫秒差除以1000將其轉換為秒,並將其儲存在second_diff變數中。

步驟3 − 現在,使用if-else條件語句查詢相對時間戳差值。

步驟4 − 如果second_diff的值小於60,則差值以秒為單位。如果second_diff的值介於60和3600之間,則差值以小時為單位。使用者也可以以此類推計算天、月和年。

示例

在下面的示例中,我們使用Date建構函式建立了兩個不同的日期物件,並使用了上述步驟來查詢兩個日期之間的相對時間戳。

在輸出中,使用者可以觀察到以下程式碼表示以月為單位的時間戳差值。

<html>
<body>
   <h3>Getting the relative timestamp difference between two dates using the <i> custom algorithm </i></h3>
   <p id="output"></p>
   <script>
      let output = document.getElementById("output");
      
      // creating the current date
      let current_date = new Date();
      
      // previous date
      let previous_date = new Date("jan 14, 2022 12:21:45");
      
      // finding the difference in total seconds between two dates
      let second_diff = (current_date.getTime() - previous_date.getTime()) / 1000;
      output.innerHTML += "The first date is " + current_date + "</br>";
      output.innerHTML += "The second date is " + previous_date + "</br>";
      
      // showing the relative timestamp.
      if (second_diff < 60) {
         output.innerHTML += "difference is of " + second_diff + " seconds.";
      } else if (second_diff < 3600) {
         output.innerHTML += "difference is of " + second_diff / 60 + " minutes.";
      } else if (second_diff < 86400) {
         output.innerHTML += "difference is of " + second_diff / 3600 + " hours.";
      } else if (second_diff < 2620800) {
         output.innerHTML += "difference is of " + second_diff / 86400 + " days.";
      } else if (second_diff < 31449600) {
         output.innerHTML += "difference is of " + second_diff / 2620800 + " months.";
      } else {
         output.innerHTML += "difference is of " + second_diff / 31449600 + " years.";
      }
   </script>
</body>
</html>

使用Intl的RelativeTimeFormat() API

Intl指的是國際化API。它包含各種日期和時間格式化方法。我們可以使用Intl物件的RelativeTimeFormat()方法獲取兩個日期之間的相對時間戳。

語法

使用者可以按照以下語法使用RelativeTimeFormat() API獲取兩個日期之間的相對時間戳。

var relativeTimeStamp =
new Intl.RelativeTimeFormat("en", { numeric: "auto",});

// compare the value of RelativeTimeStamp with milliseconds of different time units

在上例語法中,RelativeTimeFormat()方法返回時間戳差值。time_Stamp_unit是一個物件,包含不同的時間單位及其總毫秒數。

步驟

步驟1 − 建立一個單位物件,其中包含時間單位作為鍵,以及該時間單位的總毫秒數作為值。

步驟2 − 獲取兩個日期之間的毫秒時間差。

步驟3 − 現在使用for-in迴圈遍歷time_stamp_unit物件,並檢查second_diff的值是否大於特定時間的總毫秒數;使用RelativeTimeFormat() API的format方法以該特定單位格式化時間戳。

步驟4 − 之後,中斷for迴圈。

示例

在下面的示例中,我們使用了RelativeTimeFomrat()方法來獲取兩個日期之間的相對時間戳差值,如上述語法和步驟中所解釋的那樣。

<html>
<body>
   <h3>Getting the relative timestamp difference between two dates using the <i> RelativeTimeFormat() </i> method </h3>
   <p id="output"></p>
   <script>
      let output = document.getElementById("output");
      let current_date = new Date();
      let previous_date = new Date("jan 14, 2022 12:21:45");
      
      // finding the difference in total seconds between two dates 
      let second_diff = current_date.getTime() - previous_date.getTime();
      output.innerHTML += "The first date is " + current_date + "</br>";
      output.innerHTML += "The second date is " + previous_date + "</br>";
      var time_Stamp_unit = {
         year: 31536000000,
         month: 31536000000 / 12,
         day: 86400000,
         hour: 3600000,
         minute: 60000,
         second: 1000,
      };
      var relativeTimeStamp = new Intl.RelativeTimeFormat("en", {
         numeric: "auto",
      });
      
      // iterate through all time stamps
      for (var ele in time_Stamp_unit) {
         
         // if second_diff's value is greater than particular timesapm unit's total millisecond value, format accordingly
         if (Math.abs(second_diff) > time_Stamp_unit[ele] || ele == "second") {
            output.innerHTML += "The difference between two dates is " + relativeTimeStamp.format(
               Math.round(second_diff / time_Stamp_unit[ele]), ele
            );
            break;
         }
      }
   </script>
</body>
</html>

使用者學習瞭如何使用if-else語句和RelativeTimeFormat() API的format()方法查詢兩個日期之間的相對時間戳。使用者可以根據自己的需求使用這兩種方法。

更新於:2023年3月10日

5K+瀏覽量

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.