JavaScript實現倒計時功能，附實現源碼

2025-04-11 08:42:37

在 JavaScript 中實現倒計時可以通過 setInterval 或 setTimeout 來實現。以下是一個簡單的倒計時示例，支持天、小時、分鐘和秒的顯示。

代碼

function countdown(targetDate, callback) {
    // 目標時間
    const targetTime = newDate(targetDate).getTime();

    // 每秒更新一次倒計時
    const timer = setInterval(() => {
        // 當前時間
        const now = newDate().getTime();

        // 剩余時間（毫秒）
        const timeRemaining = targetTime - now;

        // 如果倒計時結束
        if (timeRemaining <= 0) {
            clearInterval(timer); // 停止計時器
            callback("倒計時結束！"); // 執行回調
            return;
        }

        // 計算天、小時、分鐘、秒
        const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000;

        // 調用回調函數，返回剩余時間
        callback({ days, hours, minutes, seconds });
    }, 1000); // 每秒更新一次
}

// 示例用法
const targetDate = "2023-12-31T23:59:59"; // 目標時間
countdown(targetDate, (time) => {
    if (typeof time === "string") {
        console.log(time); // 倒計時結束
    } else {
        console.log(
            `剩余時間：${time.days}天 ${time.hours}小時 ${time.minutes}分鐘 ${time.seconds}秒`
        );
    }
});

代碼說明

targetDate：目標時間，可以是字符串（如 "2023-12-31T23:59:59"）或 Date 對象。
setInterval：每秒執行一次，更新倒計時。
timeRemaining：計算剩余時間（毫秒）。
days, hours, minutes, seconds：將剩余時間轉換為天、小時、分鐘和秒。
callback：回調函數，用于返回倒計時結果或結束提示。

示例輸出

剩余時間：30天 5小時 10分鐘 45秒
剩余時間：30天 5小時 10分鐘 44秒
剩余時間：30天 5小時 10分鐘 43秒
...
倒計時結束！

優化：格式化時間

如果希望時間顯示為兩位數（如 01 而不是 1），可以添加一個格式化函數：

function formatTime(time) {
    return time < 10 ? `0${time}` : time;
}

// 在回調中使用
countdown(targetDate, (time) => {
    if (typeof time === "string") {
        console.log(time);
    } else {
        console.log(
            `剩余時間：${formatTime(time.days)}天 ${formatTime(time.hours)}小時 ${formatTime(time.minutes)}分鐘 ${formatTime(time.seconds)}秒`
        );
    }
});

停止倒計時

如果需要手動停止倒計時，可以返回 clearInterval 的函數：

function countdown(targetDate, callback) {
    const targetTime = newDate(targetDate).getTime();
    const timer = setInterval(() => {
        const now = newDate().getTime();
        const timeRemaining = targetTime - now;

        if (timeRemaining <= 0) {
            clearInterval(timer);
            callback("倒計時結束！");
            return;
        }

        const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

        callback({ days, hours, minutes, seconds });
    }, 1000);

    // 返回停止函數
    return() =>clearInterval(timer);
}

// 示例用法
const stop = countdown(targetDate, (time) => {
    if (typeof time === "string") {
        console.log(time);
    } else {
        console.log(
            `剩余時間：${time.days}天 ${time.hours}小時 ${time.minutes}分鐘 ${time.seconds}秒`
        );
    }
});

// 手動停止倒計時
setTimeout(() => {
    stop();
    console.log("倒計時已停止！");
}, 5000); // 5秒后停止

總結

使用 setInterval 實現倒計時。
支持天、小時、分鐘、秒的顯示。
可以通過回調函數返回倒計時結果或結束提示。
提供格式化時間和手動停止的功能。

責任編輯：龐桂玉來源： web前端開發

JavaScript 倒計時前端