JavaScript中forEach失效排查：实现倒计时结束显示折扣结束提示

问题分析 #

你的代码存在以下几个关键问题：

• 语法错误：JavaScript代码未闭合if块、setInterval回调以及forEach循环，导致代码无法正常解析执行。
• 逻辑错误：单个倒计时归0时会显示所有.end-discount提示框，而非对应当前倒计时的那个。
• 类型错误：data-timestamp的取值是字符串，直接参与减法运算会得到错误的时间差。
• 方法缺失：未定义toHHMMSS()格式化方法，运行时会抛出未定义错误。
• 性能浪费：倒计时归0后未清除定时器，会持续执行无效的循环判断。

修正后的完整代码 #

HTML（保持结构不变） #

<div class="card-footer text-center text-secondary end-discount d-none">End of Discount</div>
<p data-timestamp="1671524779" class="timestamp fw-bolder text-danger text-end mb-0" dir="ltr"></p>
<div class="card-footer text-center text-secondary end-discount d-none">End of Discount</div>
<p data-timestamp="1671524779" class="timestamp fw-bolder text-danger text-end mb-0" dir="ltr"></p>
<div class="card-footer text-center text-secondary end-discount d-none">End of Discount</div>
<p data-timestamp="1671524779" class="timestamp fw-bolder text-danger text-end mb-0" dir="ltr"></p>
<div class="card-footer text-center text-secondary end-discount d-none">End of Discount</div>
<p data-timestamp="1671524779" class="timestamp fw-bolder text-danger text-end mb-0" dir="ltr"></p>

JavaScript #

// 扩展字符串方法：将秒数格式化为HH:MM:SS格式
String.prototype.toHHMMSS = function () {
    const totalSeconds = parseInt(this, 10);
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;
    return `${hours.toString().padStart(2, '0')} : ${minutes.toString().padStart(2, '0')} : ${seconds.toString().padStart(2, '0')}`;
};

const timestamps = document.querySelectorAll('[data-timestamp]');
timestamps.forEach(function(timestamp) {
    // 将timestamp转换为数字类型
    const targetTimestamp = Number(timestamp.dataset.timestamp);
    // 启动定时器并保存ID，方便后续清除
    const timer = setInterval(() => {
        const curTime = Math.floor(new Date().getTime() / 1000);
        const remainingSeconds = Math.max(targetTimestamp - curTime, 0);
        const formattedTime = remainingSeconds.toString().toHHMMSS();
        timestamp.innerText = formattedTime;

        if (formattedTime === '00 : 00 : 00') {
            // 找到当前倒计时对应的提示框（前一个兄弟元素）
            const correspondingEndDiscount = timestamp.previousElementSibling;
            if (correspondingEndDiscount && correspondingEndDiscount.classList.contains('end-discount')) {
                correspondingEndDiscount.classList.remove('d-none');
                correspondingEndDiscount.classList.add('d-block');
            }
            // 清除定时器，停止后续执行
            clearInterval(timer);
        }
    }, 1000);
});

关键修正说明 #

1. 补全语法结构：添加缺失的}，确保代码能正常解析。
2. 类型转换：将data-timestamp的字符串值转为数字，避免计算错误。
3. 实现格式化方法：定义toHHMMSS()方法，正确将剩余秒数格式化为时分秒格式。
4. 对应提示逻辑：通过previousElementSibling获取当前倒计时对应的提示框，只显示对应元素。
5. 清除定时器：倒计时归0后立即清除定时器，避免无效循环，节省性能。

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