如何在单个页面中显示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可以在脚本的全局范围内，然后它的工作。