Question

这个js倒数计时器工作正常但是在多个计时器上它只能处理最后一个div。它将如何在所有div上运行？它应该适用于所有div，因为将有两个以上的定时器。任何指导都将非常感激。

这是我的代码：

HTML＆amp; 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

首先，我认为整个设计都被打破了。您应该考虑重用现有的倒计时小部件。（Vertical Center Using Display Utils Demo）

在您的具体情况下，问题是您的setTimeout。它会一次又一次地运行你的countdowny方法，但始终使用全局varibales。

因此，您需要重构并将要更新的元素（以及剩余时间）提供给倒计时功能。

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>

倒数第二天的小时数

多个倒数计时器

2 个答案: