如何在JS中实现基于指定起止时间的倒计时器

我有两个带时间的日期，需要制作一个倒计时器，用于展示从指定startTime到endTime的剩余时长。现有一段示例代码，但它始终输出“Left time: 4h 0m 0s”。重要说明：我不需要使用当前日期，仅基于给定的起止时间。

用户提供的原代码：

var endTime = '2023-09-06 19:41:55'; 
var startTime = '2023-09-06 15:41:55';
var targetEndTime = new Date(endTime.replace(/-/g, '/'));
var targetTime = new Date(startTime.replace(/-/g, '/'));

function updateCountdown() {
    
    if (targetTime < targetEndTime) {
        var timeDiff = targetEndTime - targetTime;
        var hours = Math.floor(timeDiff / (1000 * 60 * 60));
        var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

        document.getElementById('countdown').innerHTML = 'Left time: ' + hours + 'h ' + minutes + 'm ' + seconds + 's';
    } else if (targetEndTime < targetTime) {
        document.getElementById('countdown').innerHTML = 'completed.';
    } else {
        document.getElementById('countdown').innerHTML = 'expired.';
    }
}

setInterval(updateCountdown, 1000); 
updateCountdown(); 

问题原因 #

原代码中targetTime是固定的起始时间，每次计算的时间差都是endTime - startTime的固定值（也就是4小时），所以输出不会变化。要实现倒计时，需要让代表当前进度的时间节点每秒递增，模拟时间从startTime向endTime推进的过程。

修正后的代码 #

var endTime = '2023-09-06 19:41:55'; 
var startTime = '2023-09-06 15:41:55';
var targetEndTime = new Date(endTime.replace(/-/g, '/'));
// 初始化当前进度时间为起始时间
var currentProgressTime = new Date(startTime.replace(/-/g, '/'));

function updateCountdown() {
    if (currentProgressTime < targetEndTime) {
        var timeDiff = targetEndTime - currentProgressTime;
        var hours = Math.floor(timeDiff / (1000 * 60 * 60));
        var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

        document.getElementById('countdown').innerHTML = '剩余时间: ' + hours + 'h ' + minutes + 'm ' + seconds + 's';
        // 每秒推进1秒，模拟时间流逝
        currentProgressTime.setSeconds(currentProgressTime.getSeconds() + 1);
    } else if (targetEndTime < currentProgressTime) {
        document.getElementById('countdown').innerHTML = '已完成.';
        // 倒计时结束后停止定时器
        clearInterval(countdownTimer);
    } else {
        document.getElementById('countdown').innerHTML = '已到期.';
        clearInterval(countdownTimer);
    }
}

// 保存定时器ID，方便结束时清理
var countdownTimer = setInterval(updateCountdown, 1000); 
updateCountdown(); 

关键修改点 #

• 将固定的targetTime改为动态的currentProgressTime，作为进度节点
• 每次执行倒计时更新时，给currentProgressTime增加1秒，模拟时间从起始向结束推进
• 倒计时结束后调用clearInterval清除定时器，避免无用的重复执行

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