JavaScript计时器无法正确显示到当日24点剩余时长求助

核心问题：错误的目标时间计算 #

你当前代码中countToDate的计算逻辑是给当前时间加24小时，这会指向明天的同一时刻，而非当日24点，所以页面加载时会默认显示24小时倒计时，不符合需求。

修复步骤 #

1. 正确计算当日24点的时间 #

替换原有的countToDate初始化代码，创建一个精准指向当日24:00:00的Date对象：

const now = new Date();
// 构造当日24点的时间（等价于次日00:00:00）
const countToDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 24, 0, 0, 0);

2. 修复flip函数中的DOM元素笔误 #

原代码里top.textContent = startNumber是错误写法，应该改为topHalf.textContent = startNumber，否则会因找不到top元素导致功能异常。

完整修复后的代码 #

const now = new Date();
const countToDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 24, 0, 0, 0);
let previousTimeBetweenDates;

setInterval(() => {
  const currentDate = new Date();
  const timeBetweenDates = Math.ceil((countToDate - currentDate) / 1000);
  // 避免24点后出现负数倒计时，强制显示00:00:00
  const validTime = Math.max(timeBetweenDates, 0);
  flipAllCards(validTime);

  previousTimeBetweenDates = validTime;
}, 250);

function flipAllCards(time) {
  const seconds = time % 60;
  const minutes = Math.floor(time / 60) % 60;
  const hours = Math.floor(time / 3600);

  flip(document.querySelector("[data-hours-tens]"), Math.floor(hours / 10));
  flip(document.querySelector("[data-hours-ones]"), hours % 10);
  flip(document.querySelector("[data-minutes-tens]"), Math.floor(minutes / 10));
  flip(document.querySelector("[data-minutes-ones]"), minutes % 10);
  flip(document.querySelector("[data-seconds-tens]"), Math.floor(seconds / 10));
  flip(document.querySelector("[data-seconds-ones]"), seconds % 10);
}

function flip(flipCard, newNumber) {
  const topHalf = flipCard.querySelector(".top");
  const startNumber = parseInt(topHalf.textContent);
  if (newNumber === startNumber) return;

  const bottomHalf = flipCard.querySelector(".bottom");
  const topFlip = document.createElement("div");
  topFlip.classList.add("top-flip");
  const bottomFlip = document.createElement("div");
  bottomFlip.classList.add("bottom-flip");

  // 修正笔误：top → topHalf
  topHalf.textContent = startNumber;
  bottomHalf.textContent = startNumber;
  topFlip.textContent = startNumber;
  bottomFlip.textContent = newNumber;

  topFlip.addEventListener("animationstart", e => {
    topHalf.textContent = newNumber;
  });
  topFlip.addEventListener("animationend", e => {
    topFlip.remove();
  });
  bottomFlip.addEventListener("animationend", e => {
    bottomHalf.textContent = newNumber;
    bottomFlip.remove();
  });
  flipCard.append(topFlip, bottomFlip);
}

额外优化说明 #

• 新增Math.max(timeBetweenDates, 0)逻辑，确保当日24点过后倒计时不会出现负数，始终显示00:00:00。
• 统一代码缩进格式，提升可读性。

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