2.5 小时后每周重新开始倒计时

Question

我想要一个每周日 9:30am 结束的倒计时时钟。然后它将显示 "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 秒等待 "watch live" 和 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>

2.5 小时后每周重新开始倒计时

Restart countdown weekly after 2.5 hours expired

javascript

countdown