複数のカウントダウンタイマー

Question

このjsカウントダウンタイマーは正常に動作していますが、複数のタイマーでは最後のdivでのみ動作しています。すべての部門でどのように実行されますか？ 3つ以上のタイマーが存在するため、すべての部門で機能するはずです。すべての指導は本当に感謝されます。

Fiddle

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

まず、デザイン全体が壊れていると思います。既存のカウントダウンウィジェットを再利用することを検討する必要があります。 （The simplest possible JavaScript countdown timer?）

特定のケースでは、問題はあなたのsetTimeoutです。何度もcountdownyメソッドを実行しますが、常にグローバル変数を使用します。

リファクタリングして、更新する要素（および残りの時間）をカウントダウン機能に与える必要があります。

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