JavaScript 時間轉換：從 HH:mm:ss 到十進制小時及反向轉換

關鍵點

  • JavaScript 可以輕松實現時間格式（HH:mm:ss 或 HH:mm）與十進制小時（如 17.5）的相互轉換。
  • 兩個函數分別處理時間字符串到十進制小時，以及十進制小時到時間字符串的轉換，支持靈活的輸入和輸出格式。
  • 這些函數適用于時間跟蹤、工資計算和數據可視化等場景，代碼簡單且健壯。
時間字符串到十進制小時

以下函數將 17:00:00 或 17:00 轉換為十進制小時（如 17.0 或 17.5）：

function timeToDecimal(timeStr) {const parts = timeStr.split(':');if (parts.length < 2 || parts.length > 3) {throw new Error('Invalid time format. Expected HH:mm or HH:mm:ss');}const [hours, minutes, seconds = 0] = parts.map(Number);if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) {throw new Error('Invalid time values');}if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59 || seconds < 0 || seconds > 59) {throw new Error('Time values out of range');}const decimalTime = hours + (minutes / 60) + (seconds / 3600);return parseFloat(decimalTime.toFixed(2));
}

示例：

  • timeToDecimal('17:00:00') 返回 17.0
  • timeToDecimal('17:30') 返回 17.5
十進制小時到時間字符串

以下函數將十進制小時（如 17.5）轉換為 HH:mm:ss 或 HH:mm 格式：

function decimalToTime(decimalHours, format = 'HH:mm:ss') {if (typeof decimalHours !== 'number' || isNaN(decimalHours) || decimalHours < 0) {throw new Error('Invalid decimal hours');}let hours = Math.floor(decimalHours);let minutesDecimal = (decimalHours - hours) * 60;let minutes = Math.floor(minutesDecimal);let secondsDecimal = (minutesDecimal - minutes) * 60;let seconds = Math.round(secondsDecimal);if (seconds >= 60) {minutes += 1;seconds -= 60;}if (minutes >= 60) {hours += 1;minutes -= 60;}const pad = num => num.toString().padStart(2, '0');if (format === 'HH:mm:ss') {return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;} else if (format === 'HH:mm') {const totalMinutes = Math.round(minutes + seconds / 60);let finalHours = hours;let finalMinutes = totalMinutes;if (totalMinutes >= 60) {finalHours += 1;finalMinutes = 0;}return `${pad(finalHours)}:${pad(finalMinutes)}`;} else {throw new Error('Invalid format. Expected "HH:mm:ss" or "HH:mm"');}
}

示例：

  • decimalToTime(17.5, 'HH:mm:ss') 返回 17:30:00
  • decimalToTime(17.75, 'HH:mm') 返回 17:45
實際應用

這些函數可用于計算工作時長、生成時間報告或在日程系統中處理時間數據。例如，將員工的上下班時間轉換為十進制小時以計算工資。

JavaScript 時間轉換：從 HH:mm:ss 到十進制小時及反向轉換

在許多 Web 應用中，處理時間數據是一項常見任務。例如，你可能需要將員工的上下班時間（如 17:00:00 或 17:30）轉換為十進制小時（如 17.5）以計算工作時長，或者將十進制小時轉換回標準時間格式以顯示在界面上。本文將一步步教你如何使用 JavaScript 實現兩個函數：一個將 HH:mm:ss 或 HH:mm 格式的時間字符串轉換為十進制小時，另一個將十進制小時轉換回時間字符串。我們還將探討這些函數的實際應用場景，并提供健壯的代碼實現。

什么是時間轉換？

時間轉換是指在不同時間表示形式之間切換。HH:mm:ss（小時:分鐘:秒）和 HH:mm（小時:分鐘）是常見的時間字符串格式，而十進制小時（如 17.5 表示 17 小時 30 分鐘）則便于數學計算。例如：

  • 17:30:00 轉換為十進制為 17.5（30 分鐘 = 0.5 小時）。
  • 17.75 轉換回時間為 17:45:00（0.75 小時 = 45 分鐘）。

這些轉換在時間跟蹤、工資計算和數據可視化中非常有用。

函數 1：時間字符串到十進制小時

我們首先實現 timeToDecimal 函數，將時間字符串轉換為十進制小時，支持 HH:mm:ss 和 HH:mm 格式。

步驟
  1. 解析時間字符串：
    • 使用 split(':') 將字符串分割為小時、分鐘和秒（若有）。
    • 檢查分割結果的長度：2 表示 HH:mm，3 表示 HH:mm:ss。
  2. 轉換為數字：
    • 使用 map(Number) 將字符串數組轉換為數字數組。
    • 若為 HH:mm，秒默認為 0。
  3. 驗證輸入：
    • 使用正則表達式 /^\d{2}:\d{2}(:\d{2})?$/ 確保格式正確。
    • 檢查小時（0-23）、分鐘（0-59）、秒（0-59）是否有效。
  4. 計算十進制小時：
    • 公式：hours + (minutes / 60) + (seconds / 3600)。
    • 分鐘除以 60 轉換為小時小數，秒除以 3600 轉換為小時小數。
  5. 格式化輸出：
    • 使用 toFixed(2) 保留 2 位小數，parseFloat 轉換為數字。
代碼實現

以下是完整的 timeToDecimal 函數：

function timeToDecimal(timeStr) {if (!/^\d{2}:\d{2}(:\d{2})?$/.test(timeStr)) {throw new Error('Invalid time format. Expected HH:mm or HH:mm:ss');}const [hours, minutes, seconds = 0] = timeStr.split(':').map(Number);if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) {throw new Error('Invalid time values');}if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59 || seconds < 0 || seconds > 59) {throw new Error('Time values out of range');}const decimalTime = hours + (minutes / 60) + (seconds / 3600);return parseFloat(decimalTime.toFixed(2));
}

示例

console.log(timeToDecimal('17:00:00')); // 17.00
console.log(timeToDecimal('17:30:00')); // 17.50
console.log(timeToDecimal('17:45:00')); // 17.75
console.log(timeToDecimal('17:00'));    // 17.00
console.log(timeToDecimal('17:30'));    // 17.50
錯誤處理
  • 輸入 25:00 會拋出錯誤：Time values out of range。
  • 輸入 17:00:00:00 會拋出錯誤：Invalid time format。
函數 2：十進制小時到時間字符串

接下來，我們實現 decimalToTime 函數，將十進制小時轉換回 HH:mm:ss 或 HH:mm 格式，允許用戶通過參數選擇輸出格式。

步驟
  1. 驗證輸入：
    • 確保輸入是正數且非 NaN。
  2. 提取小時：
    • 使用 Math.floor 獲取整數部分作為小時。
  3. 計算分鐘：
    • 將小數部分乘以 60 得到分鐘。
  4. 計算秒（若需要）：
    • 將分鐘的小數部分乘以 60 得到秒，Math.round 四舍五入。
  5. 處理進位：
    • 若秒 ≥ 60，分鐘加 1，秒減 60。
    • 若分鐘 ≥ 60，小時加 1，分鐘減 60。
  6. 格式化輸出：
    • 使用 padStart(2, '0') 確保小時、分鐘、秒為兩位數。
    • 根據 format 參數返回 HH:mm:ss 或 HH:mm。
    • 對于 HH:mm，將秒轉換為分鐘并四舍五入。
代碼實現

以下是完整的 decimalToTime 函數：

function decimalToTime(decimalHours, format = 'HH:mm:ss') {if (typeof decimalHours !== 'number' || isNaN(decimalHours) || decimalHours < 0) {throw new Error('Invalid decimal hours');}let hours = Math.floor(decimalHours);let minutesDecimal = (decimalHours - hours) * 60;let minutes = Math.floor(minutesDecimal);let secondsDecimal = (minutesDecimal - minutes) * 60;let seconds = Math.round(secondsDecimal);if (seconds >= 60) {minutes += 1;seconds -= 60;}if (minutes >= 60) {hours += 1;minutes -= 60;}const pad = num => num.toString().padStart(2, '0');if (format === 'HH:mm:ss') {return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;} else if (format === 'HH:mm') {const totalMinutes = Math.round(minutes + seconds / 60);let finalHours = hours;let finalMinutes = totalMinutes;if (totalMinutes >= 60) {finalHours += 1;finalMinutes = 0;}return `${pad(finalHours)}:${pad(finalMinutes)}`;} else {throw new Error('Invalid format. Expected "HH:mm:ss" or "HH:mm"');}
}

示例

console.log(decimalToTime(17.00, 'HH:mm:ss')); // 17:00:00
console.log(decimalToTime(17.50, 'HH:mm:ss')); // 17:30:00
console.log(decimalToTime(17.75, 'HH:mm:ss')); // 17:45:00
console.log(decimalToTime(17.00, 'HH:mm'));    // 17:00
console.log(decimalToTime(17.50, 'HH:mm'));    // 17:30
console.log(decimalToTime(17.752, 'HH:mm'));   // 17:45
錯誤處理
  • 輸入 -1 會拋出錯誤：Invalid decimal hours。
  • 輸入無效格式（如 'HH:mm:xx'）會拋出錯誤：Invalid format。
實際應用場景

這些函數在多種場景中非常實用，以下是一些具體應用：

  1. 時間跟蹤與工資計算
    • 場景：員工從 09:00 到 17:30 工作，需計算總工作時長。
    • 示例： 
      const start = timeToDecimal('09:00'); // 9.0
const end = timeToDecimal('17:30');   // 17.5
const hoursWorked = end - start;      // 8.5
console.log(`工作時長: ${hoursWorked} 小時`); // 8.5 小時

    • 用途：將小時數乘以小時工資率，計算員工薪資。

  2. 項目管理

    • 場景：跟蹤任務時長，生成報告。

    • 示例：將任務時長 7.75 小時轉換為 07:45:00 顯示在報告中。 
      console.log(decimalToTime(7.75, 'HH:mm:ss')); // 07:45:00
  3. 日程系統
    • 場景：檢查會議時間是否重疊。
    • 示例：將會議時間轉換為十進制小時，比較時間段。
  4. 數據可視化
    • 場景：將時間數據轉換為十進制小時，繪制時間軸或柱狀圖。
    • 示例：使用 Chart.js
      繪制工作時長圖表，輸入十進制小時數據。
  5. 跨系統集成
    • 場景：某些系統（如 Excel 或數據庫）要求十進制小時格式。
    • 示例：將用戶輸入的 17:30 轉換為 17.5 存儲到數據庫。
性能與注意事項
  • 性能：兩個函數計算量小，適合高頻調用。對于大批量數據，可緩存解析結果以優化性能。
  • 時區：函數假設輸入為本地時間。若需處理多時區，可結合 Date 對象。
  • 精度：toFixed(2) 提供 2 位小數精度，適合大多數場景。若需更高精度，可調整參數。
  • 輸入靈活性：函數支持 HH:mm 和 HH:mm:ss，但不支持其他格式（如 5:30 PM）。若需擴展，可添加解析邏輯。
2025 年趨勢

截至 2025 年 5 月，JavaScript 仍是前端開發的支柱，時間處理在日程管理、直播系統和數據分析中需求旺盛。這些函數輕量、無需外部依賴，適合直接嵌入項目。若需復雜時間操作，可考慮 day.js 或 date-fns 庫，但本實現已足夠應對大多數場景。

對比分析

以下表格總結兩個函數的特點：

特性timeToDecimaldecimalToTime
輸入時間字符串（HH:mm:ss 或 HH:mm）十進制小時（如 17.5），可選格式參數
輸出十進制小時（如 17.5）時間字符串（如 17:30:00 或 17:30）
驗證正則表達式、范圍檢查數字類型、有效性檢查
錯誤處理拋出格式或數值錯誤拋出無效輸入或格式錯誤
主要用途計算時長、數據轉換顯示時間、生成報告
結論

通過 timeToDecimal 和 decimalToTime 函數，可以輕松實現時間字符串與十進制小時的相互轉換。這些函數支持 HH:mm:ss 和 HH:mm 格式，包含健壯的驗證和錯誤處理，適用于時間跟蹤、項目管理和數據可視化等場景。希望本文能幫助你快速掌握這些技術，并在實際項目中應用它們。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/81400.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/81400.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/81400.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

LLM智能體新紀元：深入解析MCP與A2A協議，賦能智能自動化協作

LLM智能體新紀元：深入解析MCP與A2A協議，賦能智能自動化協作

LLM智能體&#xff08;LLM agents&#xff09;是能夠自主行動以實現特定目標的AI系統。在實際應用中&#xff0c;智能體能夠將用戶請求拆解為多個步驟&#xff0c;利用知識庫或API獲取數據&#xff0c;最終整合出答案。這讓智能體相比于傳統獨立聊天機器人擁有更強大的能力——…
閱讀更多...
[PMIC]PMIC重要知識點總結

[PMIC]PMIC重要知識點總結

PMIC重要知識點總結 摘要&#xff1a;PMIC (Power Management Integrated Circuit) 是現代電子設備中至關重要的組件&#xff0c;負責電源管理&#xff0c;包括電壓調節、電源轉換、電池管理和功耗優化等。PMIC 中的數字部分主要涉及控制邏輯、狀態機、寄存器配置、通信接口&am…
閱讀更多...
PYTHON訓練營DAY28

PYTHON訓練營DAY28

類 &#xff08;一&#xff09;題目1&#xff1a;定義圓&#xff08;Circle&#xff09;類 要求&#xff1a; 包含屬性&#xff1a;半徑 radius。包含方法&#xff1a; calculate_area()&#xff1a;計算圓的面積&#xff08;公式&#xff1a;πr&#xff09;。calculate_circ…
閱讀更多...
機器學習-人與機器生數據的區分模型測試 -數據篩選

機器學習-人與機器生數據的區分模型測試 -數據篩選

內容繼續機器學習-人與機器生數據的區分模型測試 使用隨機森林的弱學習樹來篩選相對穩定的特征數據 # 隨機森林篩選特征 X data.drop([city, target], axis1) # 去除修改前的城市名稱列和目標變量列 y data[target] X_train, X_test, y_train, y_test train_test_split(X…
閱讀更多...
Data whale LLM universe

Data whale LLM universe

使用LLM API開發應用 基本概念 Prompt Prompt 最初指的是自然語言處理研究人員為下游任務設計的一種任務專屬的輸入模板。 Temperature 使用Temperature參數控制LLM生成結果的隨機性和創造性&#xff0c;一般取值設置在0~1之間&#xff0c;當取值接近1的時候預測的隨機性較…
閱讀更多...
Azure 應用的托管身份與服務主體

Azure 應用的托管身份與服務主體

Microsoft Entra ID -- 前稱 Azure Active Directory -- 提供強大的身份驗證和授權功能。托管身份和服務主體通過限制憑據暴露的風險來幫助確保對 Azure 資源的訪問安全。 托管身份為Azure原生應用程序自動管理身份&#xff0c;而服務主體則非常適合需要訪問Azure資源的外部應…
閱讀更多...
16 C 語言布爾類型與 sizeof 運算符詳解：布爾類型的三種聲明方式、執行時間、賦值規則

16 C 語言布爾類型與 sizeof 運算符詳解：布爾類型的三種聲明方式、執行時間、賦值規則

1 布爾類型 1.1 布爾類型概述 布爾類型用于表示邏輯上的真&#xff08;true&#xff09;和假&#xff08;false&#xff09;兩種狀態&#xff0c;是編程中條件判斷和邏輯運算的基礎。在 C 語言中&#xff0c;布爾值的表示方式隨著標準的發展而不斷完善。 1.2 布爾類型的三種聲…
閱讀更多...
【C++詳解】string各種接口如何使用保姆級攻略

【C++詳解】string各種接口如何使用保姆級攻略

文章目錄 一、string介紹二、string使用構造函數析構函數賦值運算符重載string的遍歷修改方法1、下標[]2、迭代器3、范圍for 迭代器使用詳解const迭代器反向迭代器&#xff08;reverse) Capacity(容量相關)size/lengthmax_sizecapacityclear/emptyshrink_to_fit(縮容)reserve(擴…
閱讀更多...
回調函數應用示例

回調函數應用示例

回調函數是一種通過函數指針&#xff08;或引用&#xff09;調用的函數&#xff0c;它在特定事件或條件發生時被另一個函數調用。回調函數的核心思想是將函數作為參數傳遞&#xff0c;以便在適當的時候執行自定義邏輯&#xff0c;常用于異步編程、事件驅動架構等場景。 業務場景…
閱讀更多...
linux標準庫頭文件解析

linux標準庫頭文件解析

linuxc標準庫 C 標準庫&#xff08;C Standard Library&#xff09;包含了一組頭文件&#xff0c;這些頭文件提供了許多函數和宏&#xff0c;用于處理輸入輸出、字符串操作、數學計算、內存管理等常見編程任務。。 頭文件功能簡介<stdio.h>標準輸入輸出庫&#xff0c;包含…
閱讀更多...
Unbuntu 命令

Unbuntu 命令

Ubuntu 命令速查表? ?分類??命令??功能描述??示例/常用選項????文件與目錄?ls列出目錄內容ls -a&#xff08;顯示隱藏文件&#xff09;; ls -lh&#xff08;詳細列表易讀大小&#xff09; cd切換目錄cd ~&#xff08;主目錄&#xff09;; cd ..&#xff08;上級…
閱讀更多...
怎么在excel單元格1-5行中在原來內容前面加上固定一個字？

怎么在excel單元格1-5行中在原來內容前面加上固定一個字？

環境&#xff1a; WPS 2024 問題描述&#xff1a; 怎么在excel單元格1-5行中在原來內容前面加上固定一個字&#xff1f; 解決方案&#xff1a; 1.在Excel中&#xff0c;如果您想在單元格的內容前面添加一個固定的字&#xff0c;可以通過以下幾種方法實現&#xff1a; 方法…
閱讀更多...
Linux zip、unzip 壓縮和解壓

Linux zip、unzip 壓縮和解壓

zip 命令用于壓縮文件&#xff0c;壓縮后的文件后綴名為 .zip 。 對應的解壓命令是 unzip 。 測試用的目錄結構如下&#xff0c; userzn:~/test$ tree . ├── folder1 │ ├── folder111 │ │ └── file1.txt │ └── main1.c ├── folder2 │ ├── …
閱讀更多...
【C語言練習】047. 理解遞歸與循環的轉換

【C語言練習】047. 理解遞歸與循環的轉換

047. 理解遞歸與循環的轉換 047. 理解遞歸與循環的轉換1. 遞歸與循環的基本概念遞歸循環2. 遞歸與循環的轉換示例1：計算階乘示例2：漢諾塔問題3. 遞歸與循環的適用場景遞歸：循環：一、遞歸的適用場景與代碼示例1. 分治問題2. 樹形結構遍歷3. 復雜狀態問題二、循環的適用場景與…
閱讀更多...
我的創作紀念日——《驚變256天》

我的創作紀念日——《驚變256天》

我的創作紀念日——《驚變256天》 機緣收獲日常成就憧憬 最近&#xff0c;博主收到了 CSDN 發來的系統消息&#xff0c;這才驚覺&#xff0c;自上次第128天創作紀念日之后&#xff0c;竟又悄然走過了 128 天。站在 256 天這個頗具意義的里程碑前回望&#xff0c;博主在2023 年 …
閱讀更多...
Redis 事務與管道：原理、區別與應用實踐

Redis 事務與管道：原理、區別與應用實踐

在現代分布式系統開發中&#xff0c;Redis 作為高性能的內存數據庫&#xff0c;其事務處理和管道技術是開發者必須掌握的核心知識點。本文將深入探討 Redis 事務和管道的實現原理、使用場景、性能差異以及最佳實踐&#xff0c;幫助開發者根據實際需求選擇合適的技術方案。 一、…
閱讀更多...
Mysql 8.0.32 union all 創建視圖后中文模糊查詢失效

Mysql 8.0.32 union all 創建視圖后中文模糊查詢失效

記錄問題,最近在使用union all聚合了三張表的數據,創建視圖作為查詢主表,發現字段值為中文的篩選無法生效.......... sql示例: CREATE OR REPLACE VIEW test_view AS SELECTid,name,location_address AS address,type,"1" AS data_type,COALESCE ( update_time, cr…
閱讀更多...
Spatial Transformer Layer

Spatial Transformer Layer

我們知道cnn是無法識別到經過縮放和旋轉的圖片的,但是這個spatial transformer這個neutral network是可以做到的,可以被放到cnn里 接下來就是講解一個空間變換層地例子:我們可以看到,layerl就是layerl-1經過平移得到的,其中,我們layerl中的每一個元素,是上一層每一個元素與權重…
閱讀更多...
spark-standalone

spark-standalone

一、定義&#xff1a;Standalone 模式是一種獨立的集群部署模式&#xff0c;自帶完整服務&#xff0c;可單獨部署到一個集群中&#xff0c;無需依賴任何其他資源管理系統。 二、配置步驟 1.和前面一樣拉到hadoop101的/opt/module這個目錄里面。 2.壓縮 3.重命名為spark-sta…
閱讀更多...
Vim編輯器命令模式操作指南

Vim編輯器命令模式操作指南

Vim 的命令模式&#xff08;即 Normal 模式&#xff09;是 Vim 的核心操作模式&#xff0c;用于執行文本編輯、導航、搜索、保存等操作。以下是命令模式下的常用操作總結&#xff1a; 1. 模式切換 進入命令模式&#xff1a;在任何模式下按 Esc 鍵&#xff08;可能需要多次按&a…
閱讀更多...
最新文章

Copyright @ 2022~2023