每天自动重启倒计时

Question

我正在使用以下代码：

1. 显示“X”事件的剩余时间。
2. 当该事件> 0 时打印文本。
3. 计算 2 小时的事件持续时间并打印其他内容。

我喜欢它的工作原理，但我希望当活动结束时，计数器会在第二天自动打印同一活动的剩余时间。

    // Set the date we're counting down to
    // Year, Month ( 0 for January ), Day, Hour, Minute, Second, , Milliseconds
    //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    //::::::::::::                                       ::::::::::::
    //::::::::::::              4:00 PM                  ::::::::::::
    //::::::::::::                                       ::::::::::::
    //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    //                                   (AAAA, MM, DD, HH, mm, S ));
    var countDownDate = new Date(Date.UTC(2021, 07, 16, 23, 00, 00));

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

        // Get todays date and time
        var now = new Date().getTime();

        // Find the distance between now an the count down date
        // GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
        var distance = countDownDate - now - (3600000 * 1);

        // Time calculations for days, hours, minutes and seconds
        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);

        // Output the result in an element with id="demo"
        for (const ele of document.getElementsByClassName("chiriTimer")){
            ele.innerHTML = (days + "<span>d</span> " + hours + "<span>h</span> "
                + minutes + "<span>m</span> " + seconds + "<span>s</span><br />")
        }
        
        // If the count down is over, write some text
    if (distance < 0) {
      for (const ele of document.getElementsByClassName("chiriTimer")) {
        ele.innerHTML = "<p class='live-text'>En Vivo <i class='fa fa-circle faa-flash animated'></i></p> ";
      }
      if (distance + 7200000 < 0) {
        for (const allEllements of document.getElementsByClassName("chiriTimer")) {
          allEllements.innerHTML = "Finalizó";
        }
      }
    }
  }, 1000);
}

chiriTimer()

<p class="chiriTimer"></p>

Answer 1

在当前倒计时结束后三个小时重复第二天的倒计时。在检查两小时到期的代码之前，先检查三小时到期distance + 10800000 < 0，然后将countDownDate更改为下一个日期。

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

        // Get todays date and time
        var now = new Date().getTime();

        // Find the distance between now an the count down date
        // GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
        var distance = countDownDate - now - (3600000 * 1);

        // Time calculations for days, hours, minutes and seconds
        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);

        // Output the result in an element with id="demo"
        for (const ele of document.getElementsByClassName("chiriTimer")){
            ele.innerHTML = (days + "<span>d</span> " + hours + "<span>h</span> "
                + minutes + "<span>m</span> " + seconds + "<span>s</span><br />")
        }
        
        // If the count down is over, write some text
    if (distance < 0) {
      for (const ele of document.getElementsByClassName("chiriTimer")) {
        ele.innerHTML = "<p class='live-text'>En Vivo <i class='fa fa-circle faa-flash animated'></i></p> ";
      }
      if (distance + 10800000 < 0) {
        countDownDate = new Date(countDownDate.getTime() + 86400000)
      } else if (distance + 7200000 < 0) {
        for (const allEllements of document.getElementsByClassName("chiriTimer")) {
          allEllements.innerHTML = "Finalizó";
        }
      }
    }
  }, 1000);
}