如何在生日倒计时结束时在页面显示文字或蛋糕？

问题分析 #

你之前添加的代码存在三个核心问题导致崩溃：

• distance变量未定义，未从计算逻辑中获取剩余时间值
• x函数不存在，setInterval(x)调用了未声明的函数
• 代码末尾多了一个闭合括号}，破坏了整体语法结构

修改后的完整实现 #

以下是修复并实现倒计时结束显示庆祝效果的完整代码：

HTML 代码

<style>
  .celebration {
    display: none;
    font-size: 2rem;
    color: #ff6b6b;
    margin-top: 2rem;
  }
  .cake-emoji {
    font-size: 4rem;
  }
</style>
<center>
  <h1> Countdown to Oct. 16, 2023 12:00PM </h1>
  <h2> Days until my B-Day </h2>

  <div id="countdown-container">
    <h1>Countdown Timer</h1>
    <div>
      <span id="years"></span> years |
      <span id="days"></span> days |
      <span id="hours"></span> hours |
      <span id="minutes"></span> minutes |
      <span id="seconds"></span> seconds |
      <span id="milliseconds"></span> milliseconds
    </div>
  </div>
  
  <div class="celebration" id="celebration">
    <div class="cake-emoji">🎂</div>
    <h1>Happy Birthday! 🎉</h1>
  </div>
  
  <a href="javascript:location.reload(true)">Refresh this page</a>
</center>

JavaScript 代码

// 存储定时器ID，用于倒计时结束后停止更新
let countdownTimer;

// 计算剩余时间
function calculateTimeRemaining() {
  const currentDate = new Date();
  const targetDate = new Date("October 16, 2023 12:00:00");
  const timeRemaining = targetDate - currentDate;

  const years = Math.floor(timeRemaining / (1000 * 60 * 60 * 24 * 365));
  const days = Math.floor((timeRemaining % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24));
  const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
  const milliseconds = Math.floor(timeRemaining % 1000);

  return {
    timeRemaining,
    years,
    days,
    hours,
    minutes,
    seconds,
    milliseconds
  };
}

// 更新倒计时显示
function updateCountdown() {
  const countdown = calculateTimeRemaining();

  // 判断倒计时是否结束
  if (countdown.timeRemaining < 0) {
    clearTimeout(countdownTimer);
    document.getElementById("countdown-container").style.display = "none";
    document.getElementById("celebration").style.display = "block";
    return;
  }

  document.getElementById("years").textContent = countdown.years;
  document.getElementById("days").textContent = countdown.days;
  document.getElementById("hours").textContent = countdown.hours;
  document.getElementById("minutes").textContent = countdown.minutes;
  document.getElementById("seconds").textContent = countdown.seconds;
  document.getElementById("milliseconds").textContent = countdown.milliseconds;

  countdownTimer = setTimeout(updateCountdown, 1);
}

// 页面加载时启动倒计时
window.onload = updateCountdown;

关键修改说明 #

1. 定时器控制：新增countdownTimer变量存储定时器ID，倒计时结束后通过clearTimeout停止更新，避免无效循环
2. 剩余时间判断：在计算函数中返回原始剩余时间值，用于判断倒计时是否结束
3. 庆祝内容容器：添加默认隐藏的庆祝模块，倒计时结束后替换显示
4. 语法修复：移除了原错误代码，确保整体语法结构正确

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