Restart countdown weekly after 2.5 hours expired

Question

I would like a countdown clock that expires at 9:30am every Sunday. It will then display "Watch Live" for 2.5 hours before resetting for the same time next Sunday.

I have the following js countdown clock which works great, but it doesn't reset at all.

window.onload = function () {
  // Countdown Timer
  var x = setInterval(function () {
    var countDownDate = new Date("May 31, 2020 09:30:00").getTime();
    var now = new Date().getTime();
    var distance = countDownDate - now;
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor(
      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    var time =
      days + " days, " + hours + "h, " + minutes + "m, " + seconds + "s ";
    document.getElementById("time").innerText = time;
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("time").innerText = "Watch Live";
    }
  });

Any assistance you can provide would be greatly appreciated. Thanks.

Answer 1

You need to use setTimeout to ensure that after a period of time, the countdown starts again. Make sure to add a week to the countDownDate. I demonstrated it with 5 seconds waiting for "watch live" and 5 seconds waiting for the reset.

function nextDay(x){
    var now = new Date();    
    now.setDate(now.getDate() + (x+(7-now.getDay())) % 7);
    return now;
}

window.onload = function() {
  var countDownDate = new Date().getTime() + (1000 * 5);
  let startCountdown = function() {
    // Countdown Timer
    var x = setInterval(function() {
      var now = new Date().getTime();
      var distance = countDownDate - now;
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor(
        (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
      );
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
      var time =
        days + " days, " + hours + "h, " + minutes + "m, " + seconds + "s ";
      document.getElementById("time").innerText = time;
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("time").innerText = "Watch Live";
        setTimeout(() => {
          startCountdown();
          countDownDate = new Date().getTime() + (1000 * 10);
        }, (1000 * 5))
      }
    });
  }

  startCountdown();
}

<div id="time"></div>

And this should be the solution with the correct times.

let getNextSundayMorning = () => {
    var sunday = new Date();    
    sunday.setDate(now.getDate() + (7 - now.getDay() % 7));
    sunday.setHours(9, 30, 0, 0); // Take care of timezone issues.
    return sunday;
}

window.onload = function() {
  var countDownDate = getNextSundayMorning();
  let startCountdown = function() {
    // Countdown Timer
    var x = setInterval(function() {
      var now = new Date().getTime();
      var distance = countDownDate - now;
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor(
        (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
      );
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
      var time =
        days + " days, " + hours + "h, " + minutes + "m, " + seconds + "s ";
      document.getElementById("time").innerText = time;
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("time").innerText = "Watch Live";
        setTimeout(() => {
          startCountdown();
          // set to one week later
          countDownDate = countDownDate.getTime() + (1000 * 60 * 60 * 24 * 7);
        }, (1000 * 60 * 60 * 2.5)) // 2.5 hours
      }
    });
  }

  startCountdown();
}

<div id="time"></div>