Как показать 2 таймера на одной странице?
Я пытаюсь показать 2 кнопки для таймера 3 минуты, но проблема в том, что мой второй таймер работает отлично, а первый-нет, даже если я удалю второй таймер, все равно есть какая-то проблема с первым таймером. Код одинаков для обоих таймеров, просто переменные разные.
Что я уже пробовал:
<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>