Infinitely looping countdown timer JavaScript/HTML

Infinitely looping countdown timer JavaScript/HTML

repeating countdown timer html
loop timer app
online countdown timer with music
countdown timer online
timeme countdown timer
15 second timer loop
countdown timer with color
audible countdown timer online

I'm trying to make an infinitely looping countdown timer in JavaScript. I'm able to get the countdowns functioning as intended, but can't get them to reset properly once they hit 0/go below 0.

I should have specified, I apologize, for the first timer "mcReset" I need to reset the date to 7 days from the originally specified date when the timer hits 0.

For the second timer "onyReset" I need to reset the date to 5 days from the originally specified date when the timer hits 0.

So for example mcReset (Oct 14 9:28:00) would become Oct 21 9:28:00 and onyReset (Oct 17, 2019 12:00:00) would become Oct 22, 2019 12:00:00 and the countdown would infinitely loop from that.

I'm not super familiar with JavaScript so any help is appreciated :)

Here's the code:

// Set the date we're counting down to
var mcReset = new Date("Oct 14, 2019 9:28:00").getTime();
var onyReset = new Date("Oct  17, 2019 12:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = mcReset - now;
  var onyDistance = onyReset - now;
    
  // Time calculations for days, hours, minutes and seconds
  var mcDays = Math.floor(distance / (1000 * 60 * 60 * 24));
  var onyDays = Math.floor(onyDistance / (1000 * 60 * 60 * 24));
  var mcHours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var onyHours = Math.floor((onyDistance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var mcMinutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var onyMinutes = Math.floor((onyDistance % (1000 * 60 * 60)) / (1000 * 60));
  var mcSeconds = Math.floor((distance % (1000 * 60)) / 1000);
  var onySeconds = Math.floor((onyDistance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = mcDays + "d " + mcHours + "h "
  + mcMinutes + "m " + mcSeconds + "s ";
  document.getElementById("ony").innerHTML = onyDays + "d " + onyHours + "h "
  + onyMinutes + "m " + onySeconds + "s ";
    
  // If the count down is over, reset
  if (distance < 0) {
  	// do something here?
	// not sure what
  }
}, 1000);
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<p id="demo"></p>
<p id="ony"></p>

</body>
</html>

The key is to make sure each countdown has the proper target timestamp right inside the interval function that updates the page. If the countdown date is already in the past, add the countdown interval; that way the remaining time will jump seamlessly to counting down to the next timestamp.

Here's one way to do this:

const DAYS = 24 * 3600 * 1000;

const countdowns = [{
    id: "mcReset",
    timestamp: new Date("Oct 14, 2019 9:28:00").getTime(),
    interval: 7 * DAYS
  },
  {
    id: "onyReset",
    timestamp: new Date("Oct  17, 2019 12:00:00").getTime(),
    interval: 5 * DAYS
  },
  {
    id: "demo",
    timestamp: new Date(new Date().getTime() + 5000).getTime(),
    interval: 5000
  }
];

setInterval(() => {
  const now = new Date().getTime();
  countdowns.forEach(c => {
    while (c.timestamp < now) c.timestamp += c.interval; // set target to future date
    const tSecs = Math.floor((c.timestamp - now) / 1000);
    const secs = tSecs % 60;
    const tMins = (tSecs - secs) / 60;
    const mins = tMins % 60;
    const tHours = (tMins - mins) / 60;
    const hours = tHours % 24;
    const days = (tHours - hours) / 24;
    document.getElementById(c.id).textContent = `${days}d ${hours}h ${mins}m ${secs}s`;
  });
}, 1000);
p {
  text-align: center;
  font-size: 200%;
  margin-top: 0px;
}
<p id="mcReset"></p>
<p id="onyReset"></p>
<p id="demo"></p>

Javascript Countdown Timer Repeat and Count total that repeat , You can try wrapping the entire code into a function ( countTimers() in the example below) that runs every 30 seconds (5 seconds after each timer). Then, set a  Infinite Timer Loop with javascript ( no setInterval)? Ask Question Asked 7 years, 7 months ago. Active 3 years, 1 month ago. Viewed 14k times 10. 7. I was asked (by


I have refactored your code a bit.

Here is a function that counts down to a specific date, and when done, it deletes that countdown and calls itself again with a new date:

// Helper function to get the current date and add 10 seconds on top of it
const get10SecsInFuture = () => {
  // Set the date we're counting down to
  let d = new Date();

  // Add one minute to date
  d.setTime(d.getTime() + 1000 * 10);
  
  return d;
}

// Make countDown a function
const countDown = (onyReset) => {
  let countDownHandle = setInterval(() => {

    // Get today's date and time
    let now = new Date().getTime();

    // Find the distance between now and the count down date
    let onyDistance = onyReset - now;

    // Time calculations for days, hours, minutes and seconds
    let onyDays = Math.floor(onyDistance / (1000 * 60 * 60 * 24));
    let onyHours = Math.floor((onyDistance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let onyMinutes = Math.floor((onyDistance % (1000 * 60 * 60)) / (1000 * 60));
    let onySeconds = Math.floor((onyDistance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("ony").innerHTML = onyDays + "d " + onyHours + "h "
    + onyMinutes + "m " + onySeconds + "s ";

    // If the count down is over, reset
    if (onyDistance <= 0) {
      clearInterval(countDownHandle);
      countDown(get10SecsInFuture());
    }
  }, 300);
}

countDown(get10SecsInFuture());
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<p id="ony"></p>

</body>
</html>

How to create an endless countdown timer loop, made of days hours , https://code.sololearn.com/WNghJv3Imcq5/#html. How to create an endless countdown timer loop, made of days hours minutes and So, JS don't raise an error, but the returned value is NaN, what's equivalent to false ^^. This JavaScript timer countdown displays a Javascript countdown timer and alerts the user when the timer reaches zero. This countdown timer then redirects to another Web page. Particularly useful if you are writing an online test.


So add the number of days to the string and update the global variables with the new values.

function addDaysGetTime(date, numOfDays) {
  var date = new Date(date);
  date.setDate(date.getDate() + numOfDays);
  return date.getTime()
}

var mcReset = new Date("Oct 14, 2019 9:28:00").getTime();
var onyReset = new Date("Oct  17, 2019 12:00:00").getTime();
console.log("before", mcReset, onyReset)


// if( distance < 0) {
  mcReset = addDaysGetTime(mcReset, 7)
  onyReset = addDaysGetTime(onyReset, 5)
// }

   console.log("after", mcReset, onyReset)

countdown timer javascript stack overflow Code Example, Are HTML and Css programming languages? are you sure javascript · area of a circle · args discord.js · array chunk javascript · array contains  Now let's see how to add a simple countdown functionality. In order to avoid making the tutorial too long, we are going to skip the necessary CSS code to achieve the final result we want to show. However, we think it is important to highlight how we have implemented the countdown timer functionality. First we will listen the click event on the


Loop Countdown - Repeating Timer - Loop Timer, A Free Loop Countdown Timer. Totally Free! Easy To use repeats or loops as many times as you want. A great Repeating Countdown Timer! Let’s start with the HTML. The countdown timer will display four figures: days, hours, minutes, and seconds. Create a < span> element for each so that later you can target them with JavaScript. Also add a < script> tag with the path to the JavaScript file right before the closing < body> tag.


The Final Countdown: Using JavaScript's setInterval + clearInterval , The Final Countdown: Using JavaScript's setInterval + clearInterval The setInterval method is great and all, until you hit an infinite loop and  A great little timer that can loops or repeats as many times as you need. The loop countdown has many uses, and is available for FREE.


Window setInterval() Method, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Interval Timer - Make your own routines, and save them! Metronome - Keep the beat with our easy to use Metronome! Stay On Top App - Download a Stopwatch and Countdown timer that stays on top of all open windows. Make Your Own Timer! - Make your own custom countdown timer or ticker until any date! Custom Countdown - Change the sounds and more