Question 262987 in Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to put text on screen at the end of a countdown?

Is there a way to put some text on screen at the end of this countdown or a cake? this is a countdown for my B-Day and i really want it to show some text and/or a cake at the end for my b-day but I have no clue on how. I have tried

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

but that didn’t work with the code, instead it completely broke it.

The link to the officail code is 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>
Tags:

3

Answers


  1. 0

    You can

    1. Create an alternate div with id="cake" or something similar that will show the Cake/Text when the countdown is over.
    2. Then in updateCountdown() check if the timeRemaining (which you’ll also have to return from calculateTimeRemaining is less than or equal to 0. If this condition is true, then get the element with the id "cake" and update the text there, else whatever you have in the code works as usual.

    (I’m new to answering questions on here, so sorry if it was expected in a specified format)

    Login or Signup to reply.
  2. 0

    updateCountdown appears to be your function that keeps repeating. (Though I highly recommend a less brute-force interval than 1ms. The browser can’t re-draw and, more to the point, the human eye can’t perceive 1000 frames per second.) It sounds like you just want to conditionally perform that repetition vs. some other action. For example:

    function updateCountdown() {
  // the rest of the code you already have, then...

  if (someCondition) {
    // end the countdown, display your results
  } else {
    // continue the countdown
    setTimeout(updateCountdown, 1);
  }
}

    So then what is someCondition? It looks like countdown is an object with several values on it. You could test all of those values individually, for example:

    if (countdown.years <= 0 && countdown.days <= 0 && countdown.hours <= 0 && countdown.minutes <= 0 && countdown.seconds <= 0 && countdown.milliseconds <= 0)

    That looks a bit clunky though. But you could add the total time to the returned object as well:

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

    And just check that in the condition:

    function updateCountdown() {
  // the rest of the code you already have, then...

  if (countdown.timeRemaining <= 0) {
    // end the countdown, display your results
  } else {
    // continue the countdown
    setTimeout(updateCountdown, 1);
  }
}

    Then it’s up to you what you want to do when that condition is met. "Show some text and/or a cake" sounds like you want to have some HTML that isn’t visible and then make it visible. For example, you could have this:

    <div id="birthdayMessage" style="display:none;">Happy birthday!</div>

    And in your condition you could show it:

    function updateCountdown() {
  // the rest of the code you already have, then...

  if (countdown.timeRemaining <= 0) {
    // end the countdown, display your results
    document.querySelector('#birthdayMessage').style.display = 'block';
  } else {
    // continue the countdown
    setTimeout(updateCountdown, 1);
  }
}

    You can continue to customize from there, creating and modifying your HTML as you see fit.

    Login or Signup to reply.
  3. 0

    Use setInterval and test the timeRemaining

    I set the hidden attribute from a div I made and clear the interval to stop the processing

    Also your HTML was invalid. All content tags belong in the body.

    Lastly is <center> deprecated but let’s do that another time

    // uncomment the next line and delete the following two lines when you have tested
// const targetDate = new Date("October 16, 2023 12:00:00");
const targetDate = new Date();
targetDate.setTime(targetDate.getTime() + 10000); // test a date 10 seconds into the future

// Function to calculate the time remaining
function calculateTimeRemaining() {
  var currentDate = new Date();
  var timeRemaining = targetDate - currentDate;
  if (timeRemaining <= 0) return 0;
  
  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();
  if (countdown === 0) {
    document.getElementById("hurrah").hidden = false; // show
    document.getElementById("milliseconds").textContent = 0; // because it's not precise
    clearInterval(tId);
    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;

}

// Call the updateCountdown function when the page is loaded
let tId; // to save the interval
window.addEventListener("DOMContentLoaded", () => {
  tId = setInterval(updateCountdown, 10);
})
    <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>
  <div id="hurrah" hidden>Hurrah for me</div>
  <a href="javascript:location.reload(true)">Refresh this page</a>
</center>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search