毫秒转换为易读时长格式：时:分:秒（时分秒）

小茗同学阿

已于 2025-02-20 17:11:50 修改

阅读量561

点赞数 1

分类专栏： JS 文章标签：前端 javascript 开发语言

于 2024-08-06 17:50:36 首次发布

本文链接：https://blog.csdn.net/zhangbaiming_/article/details/140962211

版权

JS 专栏收录该内容

9 篇文章

订阅专栏

在许多开发场景中，后端接口返回的数据常常是以毫秒为单位的时间戳或持续时长。而在前端展示时，我们通常需要将这些毫秒数转换成更易读的时长格式，通常采用“时:分:秒”的形式（例如 00:05:20）。为了实现这一功能，可以编写一个封装函数来进行毫秒到时分秒格式的转换。

本文将介绍如何封装一个简洁的 JavaScript 函数，用于将毫秒数转换为时长格式，并优化该函数的性能和易用性。

1、目标

假设后台返回的是毫秒数（例如：320000 毫秒），我们需要将其转换为时长格式并以 HH:mm:ss（小时:分钟:秒）的形式显示。例如：

320000 毫秒应转换为 00:05:20。

2、基本的毫秒转换函数

首先，我们先来看一个基础的函数实现。该函数接收一个毫秒数，并将其转换为时、分、秒格式。

const getMilliSecond = (milliseconds) => {
    // 将毫秒转换为秒
    let totalSeconds = parseInt(milliseconds / 1000);

    // 计算小时数
    let hours = parseInt(totalSeconds / 3600); // 每小时 3600 秒
    totalSeconds = totalSeconds % 3600; // 计算剩余秒数

    // 计算分钟数
    let minutes = parseInt(totalSeconds / 60); // 每分钟 60 秒
    let seconds = totalSeconds % 60; // 剩余秒数

    // 格式化小时、分钟、秒数
    let result = '';
    
    // 补零处理
    if (hours < 10) {
        result += '0' + hours + ':';
    } else {
        result += hours + ':';
    }

    if (minutes < 10) {
        result += '0' + minutes + ':';
    } else {
        result += minutes + ':';
    }

    if (seconds < 10) {
        result += '0' + seconds;
    } else {
        result += seconds;
    }

    return result;
};

// 测试
let time = getMilliSecond(320000);
console.log(time); // 输出: 00:05:20

3、代码解析

将毫秒转换为秒数：
- parseInt(milliseconds / 1000)：将毫秒转换为秒，parseInt 用于去除小数部分。
计算小时、分钟和秒数：
- 使用整除 (/) 和取余 (%) 运算符将总秒数转换为小时、分钟和秒数。
- 例如，1 小时 = 3600 秒，1 分钟 = 60 秒。
格式化输出：
- 通过条件判断来判断小时、分钟、秒数是否小于 10，如果小于 10，则在前面补充零。
- 最终输出格式为 HH:mm:ss。

4、优化与增强

1. 更精确的参数处理

当前函数处理了小时、分钟和秒数的基本逻辑，但它在输入非常小（例如几秒钟）或非常大的毫秒数时可能会出现一些不必要的行为。为了确保它对极限情况的处理更加鲁棒，我们可以增强函数的稳定性：

避免负数：如果传入的毫秒数为负值，应该返回一个默认的“00:00:00”。
避免无效的输入：可以对非数字类型的输入进行校验。

2. 提高代码的可读性和简洁性

我们可以使用 ES6 的 String.prototype.padStart() 方法来简化补零的过程，避免手动拼接字符串，进一步提高代码的简洁性。

5、改进后的函数

const getMilliSecond = (milliseconds) => {
    // 先判断输入是否合法
    if (isNaN(milliseconds) || milliseconds < 0) {
        return "00:00:00"; // 如果输入无效，则返回默认时间
    }

    // 将毫秒转换为秒
    let totalSeconds = Math.floor(milliseconds / 1000);

    // 计算小时、分钟、秒
    let hours = Math.floor(totalSeconds / 3600);
    let minutes = Math.floor((totalSeconds % 3600) / 60);
    let seconds = totalSeconds % 60;

    // 使用 padStart 简化补零操作
    return [
        hours.toString().padStart(2, '0'),
        minutes.toString().padStart(2, '0'),
        seconds.toString().padStart(2, '0')
    ].join(':');
};

// 测试
console.log(getMilliSecond(320000)); // 00:05:20
console.log(getMilliSecond(5000));   // 00:00:05
console.log(getMilliSecond(-1000));  // 00:00:00
console.log(getMilliSecond(0));      // 00:00:00
console.log(getMilliSecond(3600000)); // 01:00:00