同一页面多倒计时器JavaScript代码异常求助：NaN结果排查

嘿，你的代码出现NaNd NaNh NaNm NaNs是因为几个关键逻辑错误，我帮你拆解下问题，再给出修复方案：

核心问题分析 #

1. 错误地将NodeList传给Date构造函数 #

document.querySelectorAll("div.expirydiv")返回的是一个NodeList集合（包含所有匹配的div元素），你直接把这个集合丢给new Date(ps)，Date构造函数根本没法解析这种对象，所以得到的是一个无效日期，后续计算的distance自然就是NaN，最终就显示出那些奇怪的NaN文本。

2. 所有倒计时共用同一个目标时间 #

你只定义了一个countDownDate变量，但每个.expirydiv都有自己的目标日期，这样所有倒计时都会用同一个（无效的）时间，完全达不到多倒计时的效果。

3. 倒计时结束逻辑错误 #

你在循环里判断distance < 0就清除全局定时器x，这会导致只要有一个倒计时到期，所有定时器都被停掉，其他还没到期的倒计时也跟着歇菜了。

修复后的完整代码 #

<div class="expirydiv">Jan 02,2019</div>
<div class="expirydiv">Jun 15,2019</div>
<script>
// 获取所有需要倒计时的元素
const expiryElements = document.querySelectorAll("div.expirydiv");

// 为每个元素创建独立的倒计时实例
expiryElements.forEach(element => {
    // 读取当前元素内的日期文本，注意trim()去掉多余空格
    const targetDateStr = element.textContent.trim();
    // 将日期文本转换为时间戳
    const countDownDate = new Date(targetDateStr).getTime();

    // 为当前元素启动专属定时器
    const timer = setInterval(() => {
        const now = new Date().getTime();
        const distance = countDownDate - now;

        // 计算天/时/分/秒
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // 更新元素内容
        if (distance > 0) {
            element.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
        } else {
            // 倒计时结束，清除当前定时器并更新文本
            clearInterval(timer);
            element.textContent = "EXPIRED";
        }
    }, 1000);
});
</script>

关键改动说明 #

• 逐个处理元素：用forEach遍历每个.expirydiv，为每个元素单独读取日期文本、生成目标时间戳，确保每个倒计时都用自己的目标日期。
• 独立定时器：每个倒计时都有自己的timer变量，这样一个倒计时到期只会清除自己的定时器，不会影响其他倒计时。
• 正确解析日期：通过element.textContent.trim()获取每个元素内的纯日期字符串，再传给new Date()，避免多余空格导致的解析失败。
• 独立的结束判断：每个定时器内部只判断自己的distance，结束时仅清除自己的定时器，逻辑更严谨。

内容的提问来源于stack exchange，提问作者akoual.house