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

Question

我想要一个倒计时时钟，该时钟在每个星期日的上午9:30到期。然后它将显示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秒钟，等待重置。

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>