CodeIgniter项目中JavaScript倒计时仅运行2秒即停止的问题求助

你的倒计时看似停止的核心原因有两个：

1. 时间单位不匹配：distance的单位是毫秒，但你每次只减1，而定时器是1秒触发一次，相当于每秒仅减少1毫秒，视觉上就像倒计时停滞了。
2. 未实时更新时间差：初始的now是页面加载时的服务器时间，之后不会动态更新，无法反映真实的流逝时间。

修复后的代码 #

<script>
    // 从服务器获取目标倒计时时间（毫秒）
    var countDownDate = new Date("<?php echo $time['month']." ".$time['date'].", ".$time['year']." ".$time['hour'].":".$time['minute'];?>:00").getTime();

    // 每秒更新一次倒计时
    var x = setInterval(function() {
        // 实时获取当前客户端时间（毫秒）
        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);

        // 更新页面显示
        document.getElementById("demo").innerHTML = days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ";
        document.getElementById("jmpbtn").style.display = "";

        // 倒计时结束处理
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
            document.getElementById("jmpbtn").style.display = "none";
        }
    }, 1000);
</script>

<?php endforeach; ?>

关键修改点 #

• 移除了初始的固定now变量，改为每次定时器触发时获取当前客户端时间，确保时间差是实时的。
• 每次重新计算distance，替代原来错误的distance = distance -1，彻底解决时间单位不匹配的问题。
• 简化逻辑，避免静态时间差导致的倒计时停滞问题。

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