如何使用Unix时间戳实现跨时区一致的JavaScript倒计时

你当前代码的核心问题是：new Date("Mar 1 2024 11:00:00")会被浏览器解析为用户本地时区的时间，导致不同时区用户看到的倒计时终点不一致。要实现全球统一的倒计时，只需让目标时间基于UTC（协调世界时）即可，以下是两种无需第三方库的原生JS修改方案：

方案一：直接使用Unix时间戳（毫秒） #

Unix时间戳本质是UTC时间的毫秒数，不受时区影响。先获取目标UTC时间对应的毫秒数（可通过控制台new Date("2024-03-01T11:00:00Z").getTime()得到，其中Z表示UTC时区），直接赋值给目标时间变量即可：

// 2024年3月1日11:00:00 UTC对应的Unix毫秒数
const countDownTime = 1709283600000;
// 缓存DOM元素，避免重复查询
const countdownElement = document.getElementsByClassName("countdown")[0];

const countdownTimer = setInterval(() => {
    const currentTime = new Date().getTime();
    const timeLeft = countDownTime - currentTime;

    const daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
    const hoursLeft = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutesLeft = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    const secondsLeft = Math.floor((timeLeft % (1000 * 60)) / 1000);

    if (timeLeft < 0) {
        clearInterval(countdownTimer);
        countdownElement.innerHTML = "Released!";
    } else {
        countdownElement.innerText = `${daysLeft}d ${hoursLeft}h ${minutesLeft}m ${secondsLeft}s`;
    }
}, 1000);

方案二：使用Date.UTC()构造UTC时间 #

Date.UTC()方法直接返回指定UTC时间的毫秒数，参数顺序为年、月（0开始）、日、时、分、秒，代码可读性更强：

// 构造2024年3月1日11:00:00 UTC的毫秒数（注意：月份是0-based，3月对应2）
const countDownTime = Date.UTC(2024, 2, 1, 11, 0, 0);
const countdownElement = document.getElementsByClassName("countdown")[0];

const countdownTimer = setInterval(() => {
    const currentTime = new Date().getTime();
    const timeLeft = countDownTime - currentTime;

    const daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
    const hoursLeft = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutesLeft = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    const secondsLeft = Math.floor((timeLeft % (1000 * 60)) / 1000);

    if (timeLeft < 0) {
        clearInterval(countdownTimer);
        countdownElement.innerHTML = "Released!";
    } else {
        countdownElement.innerText = `${daysLeft}d ${hoursLeft}h ${minutesLeft}m ${secondsLeft}s`;
    }
}, 1000);

额外优化说明 #

• 将countDownTime和DOM元素查询移到定时器外部，避免每次循环重复创建Date对象和查询DOM，提升性能。
• 两种方案均基于UTC时间计算，确保全球所有用户看到的倒计时完全一致，不受本地时区影响。

内容的提问来源于stack exchange，提问作者Mesure73L