여러 카운트 다운 타이머

Question

이 js 카운트 다운 타이머는 정상적으로 작동하지만 여러 타이머에서 마지막 div에서만 작동합니다. 모든 사업부에서 어떻게 운영됩니까? 두 개 이상의 타이머가 있으므로 모든 div에서 작동해야합니다. 모든 지침 정말 감사하겠습니다.

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 메소드를 반복해서 실행할 것이지만 항상 전역 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);