Danyal Awan Ответов: 1

Как показать 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>

1 Ответов

Рейтинг:
0

Richard Deeming

Ни один из ваших clearInterval вызовы будут работать - переменная, которую вы передаете в качестве параметра, определяется в другой функции.

В остальном ваш код работает так, как ожидалось: Демонстрация[^]

Если вы все еще не можете заставить его работать, вам нужно будет объяснить, в чем проблема.