网站JS倒计时时钟的时区同步问题及修正需求

问题根源 #

你当前的代码里，deadline用的是'2023/09/15 00:00'这种本地时间格式，浏览器会自动把它解析成用户本地时区的时间。比如纽约用户看到的是EST时区的9月15日零点，而PST时区用户看到的是PST的零点，导致倒计时结束时间不一致，没法全球同步归零。

解决思路 #

要让所有用户的倒计时同步，必须让浏览器把截止时间解析成同一个全球统一的时间戳。最可靠的方式是使用UTC时间格式或者带明确时区偏移的ISO标准时间格式。

比如你要指向2023年9月15日6点PST：

• PST比UTC晚8小时，对应的UTC时间是当天13点，所以可以写成'2023-09-15T13:00:00Z'（Z代表UTC时区）
• 或者直接写带时区偏移的格式：'2023-09-15T06:00:00-08:00'（-08:00就是PST的时区偏移）

这两种格式所有现代浏览器（包括Safari）都能正确解析，不会受用户本地时区影响。

修改后的完整代码 #

(function () {
    // 使用带UTC标识的ISO格式，对应2023年9月15日6点PST（UTC+13点）
    var deadline = '2023-09-15T13:00:00Z';

    function pad(num, size) {
        var s = "0" + num;
        return s.substr(s.length - size);
    }

    // 简化parseDate，ISO格式在现代浏览器无需额外处理，兼容Safari
    function parseDate(date) {
        const parsed = Date.parse(date);
        if (!isNaN(parsed)) return parsed;
        // 保留原兼容逻辑处理旧格式，新代码用ISO格式不会走到这里
        return Date.parse(date.replace(/-/g, '/').replace(/[a-z]+/gi, ' '));
    }

    function getTimeRemaining(endtime) {
        let total = parseDate(endtime) - Date.now(); // 用Date.now()更高效
        let seconds = Math.floor((total / 1000) % 60);
        let minutes = Math.floor((total / 1000 / 60) % 60);
        let hours = Math.floor((total / (1000 * 60 * 60)) % 24);
        let days = Math.floor(total / (1000 * 60 * 60 * 24));

        return { total, days, hours, minutes, seconds };
    }

    function clock(id, endtime) {
        let days = document.getElementById(id + '-days');
        let hours = document.getElementById(id + '-hours');
        let minutes = document.getElementById(id + '-minutes');
        let seconds = document.getElementById(id + '-seconds');

        var timeinterval = setInterval(function () {
            var time = getTimeRemaining(endtime);

            if (time.total <= 0) {
                clearInterval(timeinterval);
                // 倒计时结束后主动设置数值为00，避免显示负数
                days.innerHTML = '00';
                hours.innerHTML = '00';
                minutes.innerHTML = '00';
                seconds.innerHTML = '00';
            } else {
                days.innerHTML = pad(time.days, 2);
                hours.innerHTML = pad(time.hours, 2);
                minutes.innerHTML = pad(time.minutes, 2);
                seconds.innerHTML = pad(time.seconds, 2);
            }
        }, 1000);
    }

    clock('js-clock', deadline);
})();

关键修改说明 #

1. 替换deadline格式：用'2023-09-15T13:00:00Z'确保所有浏览器解析为同一UTC时间，对应你需要的PST6点。
2. 优化时间获取：用Date.now()替代Date.parse(new Date())，更简洁高效。
3. 完善结束逻辑：倒计时结束后主动设置各数值为00，避免显示负数。

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