Таймер обратного отсчета

Question

Этот таймер обратного отсчета js работает нормально, но на нескольких таймерах он работает только на последнем div. Как это будет работать на всех div? Это должно работать на всех делениях, так как будет более двух таймеров. Любое руководство будет по достоинству оценено.

Это мой код:

скрипка

HTML & JS.

    <div id="timez1"></div>
    <div id="timez2"></div>

      var m = 1;
  function countdowny(){
  if(daysy == 0 && hoursy == 0 && minutesy == 0 && secondsy == 0){
    //seconds = 0;
    timez.innerHTML = "Auction Ended";
    }
    else{
      if(secondsy == 0){
          secondsy = 59;
          minutesy--;
        }else{
        secondsy--;
        }
        if(minutesy == -1){
        minutesy = 59;
          hoursy--;
         }
         if(hoursy == -1){
           hoursy = 23;
           daysy--;
      }
      if(daysy == -1){
           daysy = 0;
      }

      timez.innerHTML = "<span class=''>"+daysy+"D</span><span class=''> "+hoursy+"H</span><span class=''> "+minutesy+"M</span><span class=''> "+secondsy+"S</span>";
      setTimeout(countdowny,1000);   
      }
  }

  var daysy=3;hoursy=3;minutesy=3;secondsy=3;
    var timez = document.getElementById("timez"+m);
    countdowny();
    m++;

      var daysy=2;hoursy=2;minutesy=2;secondsy=2;
    var timez = document.getElementById("timez"+m);
    countdowny();
    m++;

Answer 1

Прежде всего, я думаю, что весь дизайн сломан. Вы должны рассмотреть возможность повторного использования существующего виджета обратного отсчета. ( Самый простой таймер обратного отсчета JavaScript?)

В вашем конкретном случае проблема заключается в вашем setTimeout. Он будет запускать ваш метод обратного отсчета снова и снова, но всегда с глобальными вариациями.

Таким образом, вам нужно провести рефакторинг и передать элемент, который вы хотите обновить (и оставшееся время), в функцию обратного отсчета.

function countdowny(element, remainingTime) {
   if(remainingTime.daysy == 0 && remainingTime.hoursy == 0 && remainingTime.minutesy == 0 && remainingTime.secondsy == 0){
      //seconds = 0;
      element.innerHTML = "Auction Ended";
   }
   else{
      //Calc date as before
      element.innerHTML = "<span class=''>"+remainingTime.daysy+"D</span><span class=''> "+remainingTime.hoursy+"H</span><span class=''> "+remainingTime.minutesy+"M</span><span class=''> "+remainingTime.secondsy+"S</span>";
      setTimeout(countdowny,1000, element, remainingTime);   
  }
}

var remainingTime = { daysy:3, hoursy: 3, minutesy:3, secondsy:3 };
var timez = document.getElementById("timez"+m);
countdowny(timez, remainingTime);

Answer 2

timedown("May 20, 2050 17:00:25",'demo');
timedown("May 20, 2019 17:00:25",'demo1');
function timedown(ti,id){
// Set the date we're counting down to
var countDownDate = new Date(ti).getTime();

// 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
    var distance = countDownDate - now;
    
    // 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"
    document.getElementById(id).innerHTML = (days!=0 ? days + "d " : '') + (hours!= 0 ? hours + "h " : '')
    + (minutes != 0 ? minutes + "m " : '') + seconds + "s ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
}

p {
  text-align: center;
  font-size: 60px;
  margin-top:0px;
}

<p id="demo"></p>
<p id="demo1"></p>

обратный отсчет дней час мин секунда