多事件倒计时异常修复：如何为天、时、分、秒设置独立标识？

嘿，我帮你找出问题所在啦！你的代码里有三个核心问题导致第二个倒计时没法正常工作，咱们一步步来修复：

1. 重复的HTML ID：两个倒计时容器里的days、hours这些ID完全一样，但HTML里ID必须是唯一的！JavaScript只会找到第一个匹配的元素，所以第二个倒计时的数值根本没法渲染到对应的位置。
2. 定时器变量被覆盖：你两个定时器都用了var x，第二个会直接把第一个的引用覆盖掉，等倒计时结束时，clearInterval(x)只能清除第二个定时器，第一个会一直跑下去。
3. 没绑定对应的倒计时容器：startTimer函数直接操作全局的days、hours这些元素，不管是哪个定时器调用，都会修改同一个元素的内容，结果两个倒计时的数值就互相覆盖了。

修正方案&完整代码 #

我调整了代码，主要做了这几个改动：用类名替代重复的ID、给每个定时器独立的变量、让startTimer基于传入的容器操作内部元素。这样两个倒计时就能独立运行啦：

</head>
<?php 
$date = date('M d, Y H:i:s', strtotime('7-3-2019 15:37:25')); 
$date1 = date('M d, Y H:i:s', strtotime('8-3-2019 15:37:25')); 
?>
<script>
// 给每个定时器单独存变量，避免覆盖
var timer1 = setInterval(function(){
    startTimer('demo', count);
}, 1000);

var timer2 = setInterval(function() {
    startTimer('demo1', count1);
}, 1000);

var count = new Date("<?php echo $date;?>").getTime();
var count1 = new Date("<?php echo $date1;?>").getTime();

function startTimer(containerId, countDownDate) {
    // 先拿到当前的倒计时容器
    const container = document.getElementById(containerId);
    if (!container) return;

    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);

    // 通过容器找内部的时间元素，用类名就不会冲突了
    container.querySelector('.days').innerHTML = days;
    container.querySelector('.hours').innerHTML = hours;
    container.querySelector('.minutes').innerHTML = minutes;
    container.querySelector('.seconds').innerHTML = seconds;

    if (distance < 0) {
        // 根据容器ID清除对应的定时器
        clearInterval(containerId === 'demo' ? timer1 : timer2);
        container.innerHTML = "EXPIRED";
    }
}
</script>
<body>
<div id="demo">
    <p class="days"></p>
    <p class="hours"></p>
    <p class="minutes"></p>
    <p class="seconds"></p>
</div>
<div id="demo1">
    <p class="days"></p>
    <p class="hours"></p>
    <p class="minutes"></p>
    <p class="seconds"></p>
</div>
</body>
</html>

关键改动说明 #

• 类名替代重复ID：把原来的id="days"改成class="days"，这样每个容器里的时间元素可以通过容器的querySelector精准获取，再也不会出现ID冲突的问题。
• 独立定时器变量：用timer1和timer2分别存两个定时器的引用，既不会互相覆盖，倒计时结束时也能精准清除对应的定时器。
• 容器绑定操作：startTimer函数先获取传入的容器元素，再基于这个容器去修改内部的时间内容，确保每个倒计时只更新自己的区域，不会干扰另一个。

这样修改后，两个倒计时就可以各自独立正常运行啦！

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