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.mzph.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