JavaScript实现倒计时功能，附实现源码-51CTO.COM

在 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}秒`
        );
    }
});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

代码说明

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秒
...
倒计时结束！1.
2.
3.
4.
5.

优化：格式化时间

如果希望时间显示为两位数（如 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)}秒`
        );
    }
});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

停止倒计时

如果需要手动停止倒计时，可以返回 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秒后停止1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

总结

使用 setInterval 实现倒计时。
支持天、小时、分钟、秒的显示。
可以通过回调函数返回倒计时结果或结束提示。
提供格式化时间和手动停止的功能。