如何在單個頁面中顯示2個定時器？

Question

我想顯示3分鐘的定時器的2個按鈕，但問題是，我的第二個定時器工作完美，但第一個定時器不，即使我刪除第二個定時器仍然存在第一個定時器的一些問題。代碼是相同的兩個計時器只是變量不同

<table> 
<tr class="odd"> 
      <td></td> 
      <th scope="row"><div class="timer"> 
      <time id="countdown"></time> 
      </div> 
      </th> 
      <td></td> 
      <td><form name="form"><input type="button" name="start" id="colourButton" value="Start Time!" onclick="showDiv()"/></form></td> 
      </tr> 
<tr class="odd"> 
      <td></td> 
      <th scope="row"><div class="timer"> 
      <time id="countdown2"></time> 
      </div> 
      </th> 
      <td></td> 
      <td><form name="form1"><input type="button" name="start1" id="colourButton2" value="Start Time!" onclick="showDiv2()"/></form></td> 
      </tr> 
</table> 


<script> 
function showDiv() { 
    document.form.colourButton.disabled = true; 
    var countdownTimer = setInterval('secondPassed()', 1000); 
} 
var seconds = 180; 
     function secondPassed() { 
      var minutes = Math.round((seconds - 30)/60), 
       remainingSeconds = seconds % 60; 

      if (remainingSeconds < 10) { 
       remainingSeconds = "0" + remainingSeconds; 
      } 

      document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; 
      if (seconds == 0) { 
       clearInterval(countdownTimer); 
      //form1 is your form name 
      window.alert("Times Up"); 
      } else { 
       seconds--; 
      } 
     } 


     function showDiv2() { 
    document.form1.colourButton2.disabled = true; 
    var countdownTimer1 = setInterval('secondPassed1()', 1000); 
} 
var seconds1 = 180; 
     function secondPassed1() { 
      var minutes1 = Math.round((seconds1 - 30)/60), 
       remainingSeconds1 = seconds1 % 60; 

      if (remainingSeconds1 < 10) { 
       remainingSeconds1 = "0" + remainingSeconds1; 
      } 

      document.getElementById('countdown2').innerHTML = minutes1 + ":" + remainingSeconds1; 
      if (seconds1 == 0) { 
       clearInterval(countdownTimer1); 
      //form1 is your form name 
      window.alert("Times Up"); 
      } else { 
       seconds1--; 
      } 
     } 
     </script> 

Answer 1

預期（既不用定時器），它不會工作，因爲你試圖取消設置的時間間隔不能被發現，這就給像未捕獲的錯誤沒有定義countdownTimer1器（Chrome）

您必須更改線路

var countdownTimer = setInterval('secondPassed()', 1000); 

和

：引發ReferenceError

var countdownTimer1 = setInterval('secondPassed1()', 1000); 

到

countdownTimer = setInterval('secondPassed()', 1000); 

和

countdownTimer1 = setInterval('secondPassed1()', 1000); 

這使得變量countdownTimer和countdownTimer1可以在腳本的全局範圍內，然後它的工作。