JavaScript倒计时指定日期提醒消息显示异常修复

你写的distance == 0分支几乎不可能触发，核心原因：

• 时间戳精确到毫秒，你的定时器每1秒才执行一次，刚好卡到目标时间精确毫秒点的概率无限趋近于0
• 就算极端情况刚好命中差值为0的点，这个状态也只会维持1毫秒，下一次定时器运行时差值已经是负数，会直接走到EXPIRED分支
• 额外的逻辑bug：你代码里设置的目标时间是2022年6月26日1点01分，但倒计时文案写的是到6月30日，两个日期不匹配。
  你的需求是到达设定日期当天展示指定消息，不是只在那个精确到毫秒的时间点弹提示，用差值等于0做判断从逻辑上就不成立。

调整判断逻辑，按时间区间做分支判断：未到目标日展示剩余天数，目标日全天展示投票提示，过了目标日直接隐藏元素，同时过期后清除定时器避免无意义的性能消耗。

// 配置目标日期，注意和展示文案保持一致
const targetDate = new Date("June 26, 2022 00:00:00");
const countDownTime = targetDate.getTime();
// 计算目标日结束的时间节点（次日0点）
const targetDayEnd = new Date(targetDate.getFullYear(), targetDate.getMonth(), targetDate.getDate() + 1).getTime();

const countdownNode = document.getElementById("countdown");
const timer = setInterval(function () {
    const currentTime = new Date().getTime();
    const distance = countDownTime - currentTime;

    if (currentTime < countDownTime) {
        // 未到目标日：计算剩余天数展示
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        countdownNode.innerHTML = `${days} days until June 26th, 2022`;
        countdownNode.style.display = "block";
    } else if (currentTime >= countDownTime && currentTime < targetDayEnd) {
        // 目标日当天：展示投票提示
        countdownNode.innerHTML = "Time To Vote";
        countdownNode.style.display = "block";
    } else {
        // 过期：隐藏元素+清除定时器
        countdownNode.style.display = "none";
        clearInterval(timer);
    }
}, 1000);

• 如果你需要在倒计时里展示精确到时分秒的剩余时间，直接在未到目标日的分支里，加上你之前写的小时、分钟、秒计算逻辑，拼接到展示的innerHTML里即可
• 如果不需要过期后隐藏，而是要展示EXPIRED文案，把else分支里的隐藏逻辑改成设置对应文案即可，定时器同样可以清除，不需要持续运行。

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