有没有办法在倒计时结束时在屏幕上显示文字？

Question

有没有办法在倒计时结束时在屏幕上放置一些文字或蛋糕？这是我的生日倒计时，我真的希望它在我的生日结束时显示一些文字和/或蛋糕，但我不知道如何做。我试过了

if (distance < 0) {
    setInterval(x);
  }
}

但这对代码不起作用，相反它完全破坏了它。

官方代码的链接是https://dateclock.w3spaces.com/b-day.html

// Function to calculate the time remaining
function calculateTimeRemaining() {
  var currentDate = new Date();
  var targetDate = new Date("October 16, 2023 12:00:00");
  var timeRemaining = targetDate - currentDate;

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

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

// Function to update the countdown timer
function updateCountdown() {
  var countdown = calculateTimeRemaining();

  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;

  setTimeout(updateCountdown, 1);
}

// Call the updateCountdown function when the page is loaded
window.onload = updateCountdown; 

<center>
  <h1> Countdown to Oct. 16, 2023 12:00PM </h1>
  <h2> Days until my B-Day </h2>

  <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>
  <a href="javascript:location.reload(true)">Refresh this page</a>
</center>

Answer 1

你可以

1. 使用 id="cake" 或类似的内容创建一个备用 div，以便在倒计时结束时显示蛋糕/文本。
2. 然后在

   updateCountdown()

   中检查

   timeRemaining

   （您还必须从

   calculateTimeRemaining

   返回）是否小于或等于 0。如果此条件为 true，则获取 id 为“cake”的元素" 并更新那里的文本，否则代码中的任何内容都可以正常工作。

（我是新来在这里回答问题的，如果需要以指定的格式，我很抱歉）