JavaScript实现秒数转换时间的两种格式

在开发过程中,经常会遇到后台接口返回的是以秒为单位的数据,而我们需要将其转换为一个更加易读的格式,本文将介绍如何实现秒数转时间的两种格式,有需要的可以参考下

目录

1. 秒数转换为“时、分、秒”格式2. 秒数转换为“时:分:秒”格式3. 代码对比与总结4. 应用场景5. 进一步优化

在开发过程中，经常会遇到后台接口返回的是以秒为单位的数据（如：32000秒），而我们需要将其转换为一个更加易读的格式，例如“时:分:秒”或“小时:分钟:秒”。这类转换通常用于计时器、任务时长显示、视频播放时间等场景。本文将介绍如何实现秒数转时间的两种格式，分别为“时、分、秒”以及“时:分:秒”。

1. 秒数转换为“时、分、秒”格式

首先，我们通过一个函数，将秒数转换为“小时:分钟:秒”格式，并确保结果中包含必要的零填充（例如“08小时03分09秒”）。

方法实现：

const formatSeconds = (seconds) => {    let secondTime = parseInt(seconds); // 秒    let minuteTime = 0; // 分    let hourTime = 0; // 小时        if (secondTime >= 60) {  // 秒数大于等于60，进行转换        minuteTime = parseInt(secondTime / 60);  // 获取分钟数        secondTime = parseInt(secondTime % 60);  // 获取剩余的秒数                if (minuteTime >= 60) {  // 如果分钟数大于等于60，进行小时转换            hourTime = parseInt(minuteTime / 60);  // 获取小时数            minuteTime = parseInt(minuteTime % 60);  // 获取剩余的分钟数        }    }        let result = '';        // 处理秒数，确保格式为 00秒    result = secondTime < 10 ? `0${secondTime}秒` : `${secondTime}秒`;        // 处理分钟数，确保格式为 00分    result = minuteTime < 10 ? `0${minuteTime}分${result}` : `${minuteTime}分${result}`;        // 处理小时数，确保格式为 00小时    result = hourTime < 10 ? `0${hourTime}小时${result}` : `${hourTime}小时${result}`;        return result;} // 测试let time = formatSeconds(32000);console.log(time);  // 输出: 08小时53分20秒

代码解析：

秒数转换：首先，通过parseInt()获取秒数，并进行分钟和小时的转换。格式化输出：秒、分、小时在转换后进行零填充，保证格式统一（例如08小时）。拼接时间：通过判断分钟、小时是否大于零，来决定是否显示相应的单位，最终拼接成易读的格式。

2. 秒数转换为“时:分:秒”格式

另外一个常见的格式是用冒号（:）分隔时、分、秒。比如：08:53:20。实现这个功能的原理与前面的类似，只是输出的分分隔符不同。

函数实现：

const getSeconds = (seconds) => {    let secondTime = parseInt(seconds);  // 秒    let minuteTime = 0;  // 分    let hourTime = 0;    // 小时        if (secondTime >= 60) {  // 秒数大于等于60，进行转换        minuteTime = parseInt(secondTime / 60);  // 获取分钟数        secondTime = parseInt(secondTime % 60);  // 获取剩余的秒数                if (minuteTime >= 60) {  // 如果分钟数大于等于60，进行小时转换            hourTime = parseInt(minuteTime / 60);  // 获取小时数            minuteTime = parseInt(minuteTime % 60);  // 获取剩余的分钟数        }    }        let result = '';        // 处理秒数，确保格式为 00    result = secondTime < 10 ? `0${secondTime}` : `${secondTime}`;        // 处理分钟数，确保格式为 00    result = minuteTime < 10 ? `0${minuteTime}:${result}` : `${minuteTime}:${result}`;        // 处理小时数，确保格式为 00    result = hourTime < 10 ? `0${hourTime}:${result}` : `${hourTime}:${result}`;        return result;} // 测试let time = getSeconds(32000);console.log(time);  // 输出: 08:53:20

代码解析：

秒数转换：与之前的实现一样，首先将秒数转换为分钟和小时。格式化输出：通过使用padStart(2, '0')或条件判断，确保秒、分、小时格式为两位数（例如：08:03:09）。拼接时间：拼接字符串时，使用:作为分隔符，将小时、分钟和秒连接起来。

3. 代码对比与总结

这两个函数formatSeconds和getSeconds的核心原理是相同的，都通过将秒数转换为分钟和小时，然后拼接成最终的时间字符串。主要的区别在于：

格式差异：formatSeconds使用中文单位（如“小时”、“分”），而getSeconds使用冒号作为分隔符（如“08:53:20”）。输出结构：formatSeconds适用于中文时间显示，而getSeconds适用于标准的时:分:秒格式。

4. 应用场景

计时器：如倒计时、计时器功能，显示剩余时间。

视频播放器：用于展示视频播放进度。

任务时长：记录任务完成的时长（例如任务处理、视频转换等）。

日志系统：用于显示系统运行时间、请求处理时长等。

5. 进一步优化

为了提高代码的可维护性和扩展性，我们可以对