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

时间：2025-02-07 08:59:08|栏目：JavaScript|点击：次

在开发过程中，经常会遇到后台接口返回的是以秒为单位的数据（如：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. 进一步优化

为了提高代码的可维护性和扩展性，我们可以对以上两个函数进行一些优化：

输入验证：确保传入的秒数是有效的数值。
代码复用：将时间转换的逻辑提取为一个单独的函数，避免重复代码。
性能优化：对于非常大的秒数，可以通过减少不必要的 parseInt() 操作来优化性能。

改进后的优化版本：

// 统一时间转换函数
const convertTime = (seconds) => {
    if (isNaN(seconds) || seconds < 0) return "00:00:00"; // 输入校验
    
    let secondTime = parseInt(seconds);
    let minuteTime = 0;
    let hourTime = 0;
 
    minuteTime = parseInt(secondTime / 60);
    secondTime = parseInt(secondTime % 60);
 
    if (minuteTime >= 60) {
        hourTime = parseInt(minuteTime / 60);
        minuteTime = parseInt(minuteTime % 60);
    }
 
    // 返回标准时:分:秒格式
    return `${hourTime.toString().padStart(2, '0')}:${minuteTime.toString().padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`;
}
 
// 测试
console.log(convertTime(32000));  // 输出: 08:53:20

总结