多重倒数计时器

H_alt 发表于 Dev

瘸

这个js倒数计时器运作良好，但在多个计时器上只能在最后一个div上使用。它如何在所有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++;

黑暗传奇

首先，我认为整个设计已损坏。您应该考虑重用现有的倒数计时小部件。（最简单的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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。