Перезапускать обратный отсчет еженедельно через 2,5 часа

Question

Я хочу, чтобы часы обратного отсчета истекали в 9:30 каждое воскресенье. Затем он будет отображать «Watch Live» в течение 2,5 часов перед сбросом на то же время в следующее воскресенье.

У меня есть следующие js часы обратного отсчета, которые отлично работают, но не сбрасываются вообще.

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";
    }
  });

Мы будем благодарны за любую помощь, которую вы можете оказать. Спасибо.

Answer 1

Вам необходимо использовать setTimeout, чтобы гарантировать, что через определенный период времени обратный отсчет начнется снова. Не забудьте добавить неделю к countDownDate. Я продемонстрировал это с 5 секундами ожидания "смотреть в прямом эфире" и 5 секундами ожидания сброса.

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>

И это должно быть решение с правильным временем.

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>