如何使用 JavaScript 將秒轉換為 HH-MM-SS 格式？

在本教程中，我們將學習如何使用原生 JavaScript 將秒轉換為小時、分鐘和秒（HH-MM-SS）格式。

日期和時間是我們日常生活不可或缺的一部分；日期和時間在計算機程式設計中經常使用。您可能需要使用 JavaScript 編寫一個帶有日曆、火車時刻表或預約安排介面的網站。因此，出於此類目的，JavaScript 為我們提供了一些內建函式，例如getTime()返回自1970年1月1日00:00:00以來的毫秒數。

使用 toISOString() 方法

我們可能需要將秒轉換為易於理解的格式化結構。假設我們正在使用 JavaScript 計算事件的持續時間，並且秒由一個很大的數字組成。在這種情況下，我們需要將秒轉換為小時、分鐘和秒格式。此方法是將秒轉換為標準HH-MM-SS格式的最簡單方法之一。

語法

使用者可以遵循以下 toISOString() 方法的語法。

var calculatedTime = new Date( null );
calculatedTime.setSeconds( 5003 );
var newTime = calculatedTime.toISOString().substr( 11, 8 );

示例

以下示例演示瞭如何使用toISOString()方法將秒轉換為HH-MM-SS格式，並使用原生 JavaScript。設定秒數並使用toISOString()方法後，返回一個長字串，然後使用 JavaScript 的.substr()內建方法將其轉換為子字串，以便以 HHMM-SS 格式獲取輸出。

<html>
<body>
   <h2>Convert seconds to HH-MM-SS</h2>
   <h4>Using <i>toISOString()</i> method to convert 5003 seconds to HHMM-SS format.</h4>
   <div id = "container"></div>
</body>
   <script>
      var calculatedTime = new Date(null);
      calculatedTime.setSeconds( 5003 ); //setting value in seconds
      var newTime = calculatedTime.toISOString().substr(11, 8);
      document.getElementById("container").innerHTML = newTime;
   </script>
</html>

僅使用 Math.floor() 和一些數學邏輯

在這種方法中，我們將使用一些簡單的數學邏輯和 JavaScript 提供的內建數學工具（如Math.floor()）將給定的秒轉換為HHMM-SS格式。這將是首先想到的樸素方法。

語法

var hoursLeft = Math.floor( seconds / 3600 );
var min = Math.floor(( seconds - hoursLeft * 3600 ) / 60 );
var secondsLeft = seconds - hoursLeft * 3600 - min * 60;
secondsLeft = Math.round( secondsLeft * 100 ) / 100;

演算法

  • 步驟 1 - 由於一小時由 3600 秒組成，因此可以透過將秒數乘以 3600 來計算小時數。這將揭示存在多少小時。

  • 步驟 2 - 使用 Math.floor() 方法將上一步的值向下取整。

  • 步驟 3 - 減去小時數後，找出剩餘的秒數。透過將此數量除以 60 來確定分鐘數。

  • 步驟 4 - 可以透過從之前提供的總秒數中減去分鐘和小時的秒數來確定秒數。

示例

藉助以下給出的示例，使用者將能夠輕鬆地藉助一些簡單的數學邏輯將秒轉換為 HH-MM-SS 格式。

<html>
<body>
   <h2>Convert seconds to HH-MM-SS</h2>
   <h4>Using <i>Math.floor()</i> method.</h4>
   <div id = "container"></div>
</body>
   <script>
      var seconds = 129;
      var hoursLeft = Math.floor(seconds / 3600);
      var min = Math.floor((seconds - hoursLeft * 3600) / 60);
      var secondsLeft = seconds - hoursLeft * 3600 - min * 60;
      secondsLeft = Math.round(secondsLeft * 100) / 100;
      var answer = hoursLeft< 10 ? "0" + hoursLeft : hoursLeft;
      answer += ":" + (min < 10 ? "0" + min : min);
      answer += ":" + (secondsLeft< 10 ? "0" + secondsLeft : secondsLeft);
      document.getElementById("container").innerHTML = "129 seconds to time is : " + answer;
   </script>
</html>

本文介紹了將秒轉換為HH-MM-SS格式最高效、省時且易於理解的方法。本文未介紹使用moment.js等外部庫的較舊方法，因為像 Moment 這樣的庫是為 JavaScript 生態系統的先前時代構建的，而當前的 Web 狀態則大不相同。

day.js、Luxon和Date-fns等庫是 moment.js 的一些替代方案，可用於直接獲取特定格式的時間。所有方法都能正常工作，但應根據使用者的需求使用。

更新於： 2022年8月17日

4K+ 次檢視

啟動你的 職業生涯

透過完成課程獲得認證

立即開始
廣告