帖子倒计时计时器无法循环，多帖值重复问题求助

我在实现帖子倒计时（格式如7days 5hrs 3mins 4secs）时遇到了问题：

• 最初把代码放进while循环，只有最新帖子的计时器生效，其他未来帖子没效果
• 修改后每个帖子都能显示计时器，但所有帖子的倒计时值完全一样

原JavaScript代码 #

<script>
    var end = new Date('<?php echo $date;?>');

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.querySelector('.countdown').innerHTML = 'EXPIRED!';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.querySelector('.countdown').innerHTML = days + 'days ';
            document.querySelector('.countdown').innerHTML += hours + 'hrs ';
            document.querySelector('.countdown').innerHTML += minutes + 'mins ';
            document.querySelector('.countdown').innerHTML += seconds + 'secs';
        }

        timer = setInterval(showRemaining, 1000);
</script>

更新后的问题 #

我给每个倒计时元素加了唯一类名（通过<?php echo ++$num1?>生成），虽然每个帖子都能显示计时器，但所有倒计时数值仍然相同：

document.querySelector(".countdown<?php echo ++$num1?>").innerHTML = days + "d " + hours + "h "
                        + minutes + "m " + seconds + "s ";

解决办法 #

1. 给每个倒计时元素绑定独立的结束时间 #

在PHP循环渲染帖子时，把当前帖子的结束时间存在元素的data-end属性里，不需要再生成唯一类名：

<!-- 循环内的倒计时元素 -->
<div class="countdown" data-end="<?php echo $date; ?>"></div>

2. 重构JavaScript逻辑，批量处理所有倒计时 #

修改JS代码，遍历所有.countdown元素，每个元素单独计算自己的倒计时：

function updateAllCountdowns() {
    // 获取所有倒计时元素
    const countdownElements = document.querySelectorAll('.countdown');
    const timeUnits = {
        second: 1000,
        minute: 1000 * 60,
        hour: 1000 * 60 * 60,
        day: 1000 * 60 * 60 * 24
    };

    countdownElements.forEach(element => {
        // 获取当前元素绑定的结束时间
        const endDateStr = element.dataset.end;
        if (!endDateStr) return;

        const end = new Date(endDateStr);
        const now = new Date();
        const distance = end - now;

        // 时间已过期的处理
        if (distance < 0) {
            element.innerHTML = 'EXPIRED!';
            return;
        }

        // 计算各时间单位
        const days = Math.floor(distance / timeUnits.day);
        const hours = Math.floor((distance % timeUnits.day) / timeUnits.hour);
        const minutes = Math.floor((distance % timeUnits.hour) / timeUnits.minute);
        const seconds = Math.floor((distance % timeUnits.minute) / timeUnits.second);

        // 更新显示
        element.innerHTML = `${days}days ${hours}hrs ${minutes}mins ${seconds}secs`;
    });
}

// 初始化执行一次，之后每秒更新
updateAllCountdowns();
setInterval(updateAllCountdowns, 1000);

问题根源 #

• 原代码中的end是全局变量，PHP循环渲染时会被最后一个帖子的日期覆盖，导致所有计时器共用同一个结束时间
• 之前修改的唯一类名方案，只是改变了元素选择器，但计算倒计时的逻辑仍然依赖全局的end变量，所以所有倒计时数值一致
• 现在的方案通过data属性为每个元素存储独立的结束时间，遍历计算时各自使用自己的时间，就能得到正确的倒计时结果

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