JavaScript实现将毫秒数转换为易读时长格式

 更新时间:2025年02月07日 09:07:15   作者:Z小明  
在许多开发场景中,我们通常需要将后端接口返回的毫秒数转换成更易读的时长格式,本文将封装一个简洁的 JavaScript 函数实现这一功能,需要的可以了解下

在许多开发场景中,后端接口返回的数据常常是以毫秒为单位的时间戳或持续时长。而在前端展示时,我们通常需要将这些毫秒数转换成更易读的时长格式,通常采用“时:分:秒”的形式(例如 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、优化与增强

更精确的参数处理

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

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

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

我们可以使用 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

6、改进说明

Math.floor() :替换 parseInt,确保四舍五入问题不再出现。

padStart() :用 padStart(2, '0') 方法来简化补零的代码,避免手动拼接。

输入验证:添加了输入校验,确保只有非负数的有效数字能够参与计算。若输入无效(如负数或非数字),则返回 "00:00:00"。

7、性能优化

对于非常大的毫秒数,尽管该函数已经进行了一些基础优化,但对于需要处理大量数据或长时间运行的应用(例如计时器或统计时长的应用),我们仍然需要考虑性能:

  • 避免不必要的计算:如果传入的毫秒数非常大,可能涉及多个小时以上,仍然可以使用简单的算数运算,不需要过多的逻辑判断。
  • 缓存结果:如果在应用中频繁调用该函数,可以考虑缓存转换结果,避免重复计算。

8、应用场景

该毫秒转换函数适用于多个场景:

  • 计时器:如在线竞赛、倒计时器。
  • 视频时长:如播放视频时显示已播放时长。
  • 任务时长统计:用于展示后台任务的执行时长。

9、总结

通过上述封装的函数,我们可以方便地将毫秒数转换为易于展示的时长格式,支持时、分、秒显示,并考虑了输入校验和性能优化。无论是短时任务还是长时间运行的计时功能,都可以通过这种方式来呈现直观的时间信息。

到此这篇关于JavaScript实现将毫秒数转换为易读时长格式的文章就介绍到这了,更多相关JavaScript毫秒数格式转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于JavaScript实现自定义滚动条

    基于JavaScript实现自定义滚动条

    这篇文章主要为大家详细介绍了基于JavaScript实现自定义滚动条,可以直接使用的滚动条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • ionic开发中点击input时键盘自动弹出

    ionic开发中点击input时键盘自动弹出

    ionic开发移动端界面时,在输入用户名和密码的时候,输入法不要挡住我的输入框,并且输入框往上滚动的时候,顶部标题不要上移,下面给大家分享实现代码,一起看看吧
    2016-12-12
  • 微信小程序导航栏跟随滑动效果的实现代码

    微信小程序导航栏跟随滑动效果的实现代码

    这篇文章主要介绍了小程序导航栏跟随滑动效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • JavaScript 中的单例内置对象Global 与 Math

    JavaScript 中的单例内置对象Global 与 Math

    这篇文章主要介绍了JavaScript 中的单例内置对象Global与Math,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • 微信小程序实现吸顶盒效果

    微信小程序实现吸顶盒效果

    这篇文章主要为大家详细介绍了微信小程序实现吸顶盒效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 获取layer.open弹出层的返回值方法

    获取layer.open弹出层的返回值方法

    今天小编就为大家分享一篇获取layer.open弹出层的返回值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 一文详解fetch,ajax,axios的区别以及使用

    一文详解fetch,ajax,axios的区别以及使用

    在现代Web开发中,数据交互是必不可少的环节,这篇文章主要介绍了fetch,ajax,axios的区别以及使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-07-07
  • JavaScript实现九宫格移动拼图游戏

    JavaScript实现九宫格移动拼图游戏

    这篇文章主要为大家详细介绍了JavaScript实现九宫格移动拼图游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JavaScript页面加载事件实例讲解

    JavaScript页面加载事件实例讲解

    在本篇文章中我们给大家通过实例讲解一下关于JavaScript页面加载事件的相关知识点内容,有需要的朋友们可以参考下。
    2019-09-09
  • JavaScript 冒泡排序和选择排序的实现代码

    JavaScript 冒泡排序和选择排序的实现代码

    本文通过实例代码给大家介绍了js冒泡排序和选择排序的实现代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-09-09

最新评论