JavaScript 中的 HH:MM:SS 秒錶示


以 HH:MM:SS 格式表示秒在各個領域都具有重要意義,因為它能夠在 JavaScript 應用程式中實現精確的時間跟蹤和測量。掌握將原始秒轉換為易於理解的 HH:MM:SS 格式的技巧,對於希望以最高精度和清晰度呈現基於時間的資料的開發者來說是一項寶貴的技能。在本文中,我們將深入探討使用 JavaScript 以 HH:MM:SS 格式表示秒的細節,探索支援開發者優雅地以人類可讀的方式顯示時間間隔的底層演算法和方法。

問題陳述

給定一個表示持續時間的秒數,任務是編寫一個 JavaScript 函式,將給定的持續時間轉換為 HH:MM:SS 格式,其中 HH 代表小時,MM 代表分鐘,SS 代表秒。

示例輸入 -

const durationInSeconds = 3665;

示例輸出 -

01:01:05

在這種情況下,輸入 durationInSeconds 為 3665,表示持續時間為 3665 秒。預期輸出是字串 "01:01:05",它表示 HH:MM:SS 格式的 1 小時 1 分鐘 5 秒。

方法

在本文中,我們將看到幾種在 JavaScript 中解決上述問題陳述的不同方法 -

  • 使用除法和模運算

  • 使用 Date 物件

  • 使用字串操作和零填充

方法 1:使用除法和模運算

要將總秒數轉換為小時、分鐘和秒的格式化表示,請將總秒數除以 3600 以獲得小時 (H)。然後,將上一步的餘數除以 60 以獲得分鐘 (M)。最後,取上一步的餘數以獲得秒 (S)。如果需要,使用前導零對 H、M 和 S 的值進行格式化,使其具有兩位數字。最後,用冒號 (":") 將 H、M 和 S 連線起來,以建立所需的表示。

示例

函式 formatTime(seconds) 獲取總秒數並執行計算以獲得小時、分鐘和剩餘秒的格式化表示。它將秒數除以 3600 以獲得小時,計算餘數並將其除以 60 以獲得分鐘,並使用模運算子獲得剩餘秒數。小時、分鐘和剩餘秒數的值使用 String.padStart() 方法格式化為兩位數字。最後,使用字串插值將格式化後的值與冒號連線起來,以建立所需的表示。

function formatTime(seconds) {
   const hours = Math.floor(seconds / 3600);
   const minutes = Math.floor((seconds % 3600) / 60);
   const remainingSeconds = seconds % 60;

   const formattedHours = String(hours).padStart(2, '0');
   const formattedMinutes = String(minutes).padStart(2, '0');
   const formattedSeconds = String(remainingSeconds).padStart(2, '0');

   return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}

const seconds = 13550;
console.log(formatTime(seconds));

輸出

以下是控制檯輸出 -

03:45:50

方法 2:使用 Date 物件

要使用 Date 物件,首先建立一個新例項,並使用總秒數乘以 1000 來設定時間。透過使用 getHours()、getMinutes() 和 getSeconds() 方法從 Date 物件中提取小時、分鐘和秒。確保透過新增前導零(如果需要)對小時、分鐘和秒的值進行兩位數字格式化。最後,將格式化後的值與冒號連線起來,以獲得所需的表示。

示例

函式 formatTime(seconds) 以總秒數作為輸入並建立一個新的 Date 物件。小時、分鐘和秒數使用 getHours()、getMinutes() 和 getSeconds() 提取。String.padStart() 對值進行前導零格式化(如果需要)。然後使用字串插值將格式化後的值連線起來,形成帶有冒號的所需表示。

function formatTime(sec) {
   const date = new Date(sec * 1000);
   const hours = String(date.getHours()).padStart(2, '0');
   const minutes = String(date.getMinutes()).padStart(2, '0');
   const seconds = String(date.getSeconds()).padStart(2, '0');

   return `${hours}:${minutes}:${seconds}`;
}

const seconds = 13550;
console.log(formatTime(seconds));

輸出

以下是控制檯輸出 -

03:45:50

方法 3:使用字串操作和零填充

要將總秒數轉換為 UTC 格式的時間,首先建立一個 Date 物件並使用 toUTCString() 方法。然後,操作生成的字串以提取小時、分鐘和秒。如果需要,透過新增前導零來確保兩位數字格式。最後,將格式化後的值與冒號連線起來,以獲得所需的表示。

示例

函式 formatTime(seconds) 以總秒數作為輸入,並建立一個以毫秒為單位的新 Date 物件。然後,它使用 toUTCString() 方法獲取時間的 UTC 字串表示。此字串被拆分為一個數組,並且時間部分從索引 4 提取。時間字串進一步拆分為小時、分鐘和秒,並且值使用 String.padStart() 進行格式化。最後,將格式化後的值與冒號連線起來,形成所需的表示。

function formatTime(sec) {
   const date = new Date(sec * 1000).toUTCString();
   const time = date.split(' ')[4];
   const [hours, minutes, seconds] = time.split(':');

   const formattedHours = String(hours).padStart(2, '0');
   const formattedMinutes = String(minutes).padStart(2, '0');
   const formattedSeconds = String(seconds).padStart(2, '0');

   return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}

const seconds = 13550;
console.log(formatTime(seconds));

輸出

以下是控制檯輸出 -

03:45:50

結論

總而言之,將秒轉換為 JavaScript 中的 HH:MM:SS 格式可能是一項艱鉅的任務,需要細緻的方法和對基本原理的全面理解。但是,透過仔細的實施和對細節的關注,可以巧妙地執行此過程。雖然對於某些人來說,生成的程式碼可能比較晦澀,但它可以為 Web 應用程式中的時間相關功能增添一絲複雜性和精確性。透過利用 JavaScript 的強大功能並採用這些深奧的技術,開發人員可以超越傳統時間表示的限制,並將使用者體驗提升到新的高度。

更新於:2023年8月4日

2K+ 次檢視

開啟您的 職業生涯

完成課程獲得認證

開始學習
廣告