桌面端与移动端Chrome的jQuery倒计时差异问题排查

我之前也碰到过一模一样的兼容性坑，核心问题出在不同浏览器对非标准日期字符串的解析行为不一致。

你用的2018-06-10 18:00:00这种空格分隔的日期格式，桌面端Chrome能正常识别为本地时间，但iOS上的Safari（包括iOS版Chrome，因为它复用了Safari的WebKit内核）对这种格式的支持很差：要么会把它解析成无效日期，要么会错误地当成UTC时间处理。这就导致countDownDate对应的时间戳和桌面端完全不一样，自然计算出来的倒计时数据就乱了——你说getTime()结果正确，大概率是移动端把日期解析成了UTC时间，和你的本地时区产生了偏移，最终差值计算出错。

给你两个靠谱的修复方案：

方案一：转为ISO 8601标准日期格式 #

把日期字符串里的空格替换成T，变成符合ISO标准的格式，所有现代浏览器都能正确解析：

$(document).ready(function() {
    $(" .cd").each(function(index, obj) {
        // 替换空格为T，转为标准格式
        var standardDateStr = obj.getAttribute('value').replace(' ', 'T');
        var countDownDate = new Date(standardDateStr);
        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate - now;
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            obj.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
            if (distance < 0) {
                clearInterval(x);
                obj.innerHTML = "EXPIRED";
            }
        }, 1000);
    });
});

方案二：手动拆分日期参数（更稳妥） #

如果担心还有极端情况的解析问题，可以手动拆分日期字符串，用Date构造函数的多参数形式创建日期对象，完全避免解析差异：

$(document).ready(function() {
    $(" .cd").each(function(index, obj) {
        var dateStr = obj.getAttribute('value');
        // 拆分日期和时间部分
        var [datePart, timePart] = dateStr.split(' ');
        // 拆分年、月、日（注意月份是0起始，要减1）
        var [year, month, day] = datePart.split('-').map(Number);
        // 拆分时、分、秒
        var [hour, minute, second] = timePart.split(':').map(Number);
        // 手动构造日期对象
        var countDownDate = new Date(year, month - 1, day, hour, minute, second);
        
        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate - now;
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            obj.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
            if (distance < 0) {
                clearInterval(x);
                obj.innerHTML = "EXPIRED";
            }
        }, 1000);
    });
});

试试这两个方案，应该就能解决移动端的显示问题了。

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