iOS端网页倒计时显示NaN问题求助及代码排查

问题根源 #

你的代码在iOS上显示NaN，核心原因是iOS Safari对日期字符串的解析遵循更严格的标准。很多在Android、Windows浏览器中能正常解析的非标准日期格式（比如"2024-05-20 14:30:00"这种用空格分隔日期和时间的格式），在iOS上会被判定为无效日期，调用getTime()后返回NaN，后续的差值计算、天数计算自然全部变成NaN。

解决方案 #

1. 统一日期格式为ISO 8601标准

将serverTime转换为iOS能正确识别的ISO 8601格式，比如把空格替换为T：

const formattedServerTime = serverTime.replace(' ', 'T');

如果是UTC时间，记得加上Z后缀（比如"2024-05-20T14:30:00Z"）。

2. 增加日期有效性校验

在初始化倒计时前，先判断日期是否解析成功，避免无效值进入计算：

const targetDate = new Date(formattedServerTime);
if (isNaN(targetDate.getTime())) {
    // 解析失败时直接显示默认值
    document.querySelector(".days").innerHTML = "00";
    return;
}

3. 优化倒计时计算逻辑

确保差值为负数（目标时间已过）时，直接显示00，避免异常计算：

修正后的完整代码 #

// 适配iOS的日期格式转换
const formattedServerTime = serverTime.replace(' ', 'T');
const targetDate = new Date(formattedServerTime);

// 校验日期有效性
if (isNaN(targetDate.getTime())) {
    document.querySelector(".days").innerHTML = "00";
} else {
    const newDate = targetDate.getTime();
    const countdown = setInterval(() => {
        const date = new Date().getTime();
        const diff = newDate - date;

        let days = 0;
        // 仅当目标时间未过时计算天数
        if (diff > 0) {
            days = Math.floor(
                (diff % (1000 * 60 * 60 * 24 * (365.25 / 12))) / (1000 * 60 * 60 * 24)
            );
        }
        document.querySelector(".days").innerHTML = days < 10 ? "0" + days : days;

        // 倒计时结束后清除定时器
        if (date >= newDate) {
            clearInterval(countdown);
            document.querySelector(".days").innerHTML = "00";
        }
    }, 1000);
}

内容的提问来源于stack exchange，提问作者Christopher Nathanael Tessy