如何修改JavaScript流逝时间日历以支持选择过往日期并显示计时

第一步：移除selectDate函数中的过去日期拦截逻辑 #

原来代码中你标注的if块就是专门拦截过去日期的逻辑，选中日期小于等于当前日期时会直接终止执行后续的计时初始化代码，直接删除这段if判断即可，修改后的代码如下：

// select date  
function selectDate(event) {
    if (event === undefined) { // get caller element in IE8
        event = window.event;
    }
    var callerElement = event.target || event.srcElement;   
    dateObject.setDate(callerElement.innerHTML);
    document.getElementById("tripDate").value = 
        dateObject.toLocaleDateString();
    hideCalendar();
    countdown = setInterval(updateCountdown, 1000);
    document.getElementById("countdownSection").style.display = "block";
}

第二步：修改updateCountdown函数适配正负时间差 #

你删除拦截逻辑后计时结果不显示，核心原因是原有的updateCountdown只适配了未来日期的倒计时逻辑，选中过去日期时会得到负数的时间差，原有逻辑遇到负数会终止计算或者不渲染结果，按以下规则修改即可同时支持过去/未来日期的计时展示：

function updateCountdown() {
    const now = new Date();
    // 计算选中日期和当前时间的差值，单位毫秒
    const timeDiff = dateObject - now;
    const isPastDate = timeDiff < 0;
    // 取差值绝对值计算天、时、分、秒
    const diffAbs = Math.abs(timeDiff);
    const days = Math.floor(diffAbs / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diffAbs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diffAbs % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diffAbs % (1000 * 60)) / 1000);

    // 按日期类型调整展示文案，将下面的countdownText替换为你页面上实际展示计时结果的元素ID
    const showText = isPastDate 
        ? `已过去 ${days}天 ${hours}时 ${minutes}分 ${seconds}秒`
        : `剩余 ${days}天 ${hours}时 ${minutes}分 ${seconds}秒`;
    document.getElementById("countdownText").innerHTML = showText;
}

注意事项 #

如果原updateCountdown函数里存在if(timeDiff < 0) clearInterval(countdown)这类遇到负差值就销毁计时器的逻辑，直接删除即可。

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