Restart countdown automatically every day

Question

I am using the following code to:

1. Show the remaining time for an "X" event.
2. Print text when that event is> 0.
3. Calculate 2 hours of event duration and print something else.

I love how this works, but I want that when the event ends, the counter automatically prints the remaining time for the same event the next day.

    // 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

To repeat the countdown for the next day three hours after the current countdown is over. Before the code that checking for two hours due, check for three hours due first distance + 10800000 < 0, then change the countDownDate to the next date.

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