快捷導(dǎo)航

JavaScript實(shí)現(xiàn)秒數(shù)轉(zhuǎn)換時(shí)間的兩種格式

更新時(shí)間：2025年02月07日 08:59:08 作者：Z小明

在開(kāi)發(fā)過(guò)程中,經(jīng)常會(huì)遇到后臺(tái)接口返回的是以秒為單位的數(shù)據(jù),而我們需要將其轉(zhuǎn)換為一個(gè)更加易讀的格式,本文將介紹如何實(shí)現(xiàn)秒數(shù)轉(zhuǎn)時(shí)間的兩種格式,有需要的可以參考下

在開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)遇到后臺(tái)接口返回的是以秒為單位的數(shù)據(jù)（如：32000秒），而我們需要將其轉(zhuǎn)換為一個(gè)更加易讀的格式，例如“時(shí):分:秒”或“小時(shí):分鐘:秒”。這類轉(zhuǎn)換通常用于計(jì)時(shí)器、任務(wù)時(shí)長(zhǎng)顯示、視頻播放時(shí)間等場(chǎng)景。本文將介紹如何實(shí)現(xiàn)秒數(shù)轉(zhuǎn)時(shí)間的兩種格式，分別為“時(shí)、分、秒”以及“時(shí):分:秒”。

1. 秒數(shù)轉(zhuǎn)換為“時(shí)、分、秒”格式

首先，我們通過(guò)一個(gè)函數(shù)，將秒數(shù)轉(zhuǎn)換為“小時(shí):分鐘:秒”格式，并確保結(jié)果中包含必要的零填充（例如“08小時(shí)03分09秒”）。

方法實(shí)現(xiàn)：

const formatSeconds = (seconds) => {
    let secondTime = parseInt(seconds); // 秒
    let minuteTime = 0; // 分
    let hourTime = 0; // 小時(shí)
    
    if (secondTime >= 60) {  // 秒數(shù)大于等于60，進(jìn)行轉(zhuǎn)換
        minuteTime = parseInt(secondTime / 60);  // 獲取分鐘數(shù)
        secondTime = parseInt(secondTime % 60);  // 獲取剩余的秒數(shù)
        
        if (minuteTime >= 60) {  // 如果分鐘數(shù)大于等于60，進(jìn)行小時(shí)轉(zhuǎn)換
            hourTime = parseInt(minuteTime / 60);  // 獲取小時(shí)數(shù)
            minuteTime = parseInt(minuteTime % 60);  // 獲取剩余的分鐘數(shù)
        }
    }
    
    let result = '';
    
    // 處理秒數(shù)，確保格式為 00秒
    result = secondTime < 10 ? `0${secondTime}秒` : `${secondTime}秒`;
    
    // 處理分鐘數(shù)，確保格式為 00分
    result = minuteTime < 10 ? `0${minuteTime}分${result}` : `${minuteTime}分${result}`;
    
    // 處理小時(shí)數(shù)，確保格式為 00小時(shí)
    result = hourTime < 10 ? `0${hourTime}小時(shí)${result}` : `${hourTime}小時(shí)${result}`;
    
    return result;
}
 
// 測(cè)試
let time = formatSeconds(32000);
console.log(time);  // 輸出: 08小時(shí)53分20秒

代碼解析：

秒數(shù)轉(zhuǎn)換：首先，通過(guò) parseInt() 獲取秒數(shù)，并進(jìn)行分鐘和小時(shí)的轉(zhuǎn)換。
格式化輸出：秒、分、小時(shí)在轉(zhuǎn)換后進(jìn)行零填充，保證格式統(tǒng)一（例如 08小時(shí)）。
拼接時(shí)間：通過(guò)判斷分鐘、小時(shí)是否大于零，來(lái)決定是否顯示相應(yīng)的單位，最終拼接成易讀的格式。

2. 秒數(shù)轉(zhuǎn)換為“時(shí):分:秒”格式

另外一個(gè)常見(jiàn)的格式是用冒號(hào)（:）分隔時(shí)、分、秒。比如：08:53:20。實(shí)現(xiàn)這個(gè)功能的原理與前面的類似，只是輸出的分分隔符不同。

函數(shù)實(shí)現(xiàn)：

const getSeconds = (seconds) => {
    let secondTime = parseInt(seconds);  // 秒
    let minuteTime = 0;  // 分
    let hourTime = 0;    // 小時(shí)
    
    if (secondTime >= 60) {  // 秒數(shù)大于等于60，進(jìn)行轉(zhuǎn)換
        minuteTime = parseInt(secondTime / 60);  // 獲取分鐘數(shù)
        secondTime = parseInt(secondTime % 60);  // 獲取剩余的秒數(shù)
        
        if (minuteTime >= 60) {  // 如果分鐘數(shù)大于等于60，進(jìn)行小時(shí)轉(zhuǎn)換
            hourTime = parseInt(minuteTime / 60);  // 獲取小時(shí)數(shù)
            minuteTime = parseInt(minuteTime % 60);  // 獲取剩余的分鐘數(shù)
        }
    }
    
    let result = '';
    
    // 處理秒數(shù)，確保格式為 00
    result = secondTime < 10 ? `0${secondTime}` : `${secondTime}`;
    
    // 處理分鐘數(shù)，確保格式為 00
    result = minuteTime < 10 ? `0${minuteTime}:${result}` : `${minuteTime}:${result}`;
    
    // 處理小時(shí)數(shù)，確保格式為 00
    result = hourTime < 10 ? `0${hourTime}:${result}` : `${hourTime}:${result}`;
    
    return result;
}
 
// 測(cè)試
let time = getSeconds(32000);
console.log(time);  // 輸出: 08:53:20

代碼解析：

秒數(shù)轉(zhuǎn)換：與之前的實(shí)現(xiàn)一樣，首先將秒數(shù)轉(zhuǎn)換為分鐘和小時(shí)。
格式化輸出：通過(guò)使用 padStart(2, '0') 或條件判斷，確保秒、分、小時(shí)格式為兩位數(shù)（例如：08:03:09）。
拼接時(shí)間：拼接字符串時(shí)，使用 : 作為分隔符，將小時(shí)、分鐘和秒連接起來(lái)。

3. 代碼對(duì)比與總結(jié)

這兩個(gè)函數(shù) formatSeconds 和 getSeconds 的核心原理是相同的，都通過(guò)將秒數(shù)轉(zhuǎn)換為分鐘和小時(shí)，然后拼接成最終的時(shí)間字符串。主要的區(qū)別在于：

格式差異：formatSeconds 使用中文單位（如“小時(shí)”、“分”），而 getSeconds 使用冒號(hào)作為分隔符（如“08:53:20”）。
輸出結(jié)構(gòu)：formatSeconds 適用于中文時(shí)間顯示，而 getSeconds 適用于標(biāo)準(zhǔn)的時(shí):分:秒格式。

4. 應(yīng)用場(chǎng)景

計(jì)時(shí)器：如倒計(jì)時(shí)、計(jì)時(shí)器功能，顯示剩余時(shí)間。

視頻播放器：用于展示視頻播放進(jìn)度。

任務(wù)時(shí)長(zhǎng)：記錄任務(wù)完成的時(shí)長(zhǎng)（例如任務(wù)處理、視頻轉(zhuǎn)換等）。

日志系統(tǒng)：用于顯示系統(tǒng)運(yùn)行時(shí)間、請(qǐng)求處理時(shí)長(zhǎng)等。

5. 進(jìn)一步優(yōu)化

為了提高代碼的可維護(hù)性和擴(kuò)展性，我們可以對(duì)以上兩個(gè)函數(shù)進(jìn)行一些優(yōu)化：

輸入驗(yàn)證：確保傳入的秒數(shù)是有效的數(shù)值。
代碼復(fù)用：將時(shí)間轉(zhuǎn)換的邏輯提取為一個(gè)單獨(dú)的函數(shù)，避免重復(fù)代碼。
性能優(yōu)化：對(duì)于非常大的秒數(shù)，可以通過(guò)減少不必要的 parseInt() 操作來(lái)優(yōu)化性能。

改進(jìn)后的優(yōu)化版本：

// 統(tǒng)一時(shí)間轉(zhuǎn)換函數(shù)
const convertTime = (seconds) => {
    if (isNaN(seconds) || seconds < 0) return "00:00:00"; // 輸入校驗(yàn)
    
    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);
    }
 
    // 返回標(biāo)準(zhǔn)時(shí):分:秒格式
    return `${hourTime.toString().padStart(2, '0')}:${minuteTime.toString().padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`;
}
 
// 測(cè)試
console.log(convertTime(32000));  // 輸出: 08:53:20

總結(jié)

本文詳細(xì)介紹了如何將秒數(shù)轉(zhuǎn)換為時(shí)間格式，包括 時(shí):分:秒 和 小時(shí)：分鐘：秒 兩種常見(jiàn)格式。
我們展示了兩種函數(shù)實(shí)現(xiàn)，并通過(guò)實(shí)例幫助理解秒數(shù)轉(zhuǎn)換的過(guò)程。
通過(guò)優(yōu)化后的 convertTime 函數(shù)，我們簡(jiǎn)化了代碼并提高了代碼的復(fù)用性，同時(shí)確保了格式一致性和輸入校驗(yàn)。

這樣的時(shí)間轉(zhuǎn)換方法適用于各種場(chǎng)景，比如計(jì)時(shí)器、視頻播放進(jìn)度、任務(wù)時(shí)長(zhǎng)統(tǒng)計(jì)等，有助于提升用戶體驗(yàn)和代碼的可維護(hù)性。

到此這篇關(guān)于JavaScript實(shí)現(xiàn)秒數(shù)轉(zhuǎn)換時(shí)間的兩種格式的文章就介紹到這了,更多相關(guān)JavaScript秒數(shù)轉(zhuǎn)時(shí)間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: