JavaScript实现秒数转换时间的两种格式_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

总结