Добавить таймеры с помощью jQuery

Я создал таймер, используя jQuery и javascript. Я добавил таймер на страницу. Каждый таймер имеет кнопку запуска, остановки и сброса. Проблема в том, что когда я нажимаю второй, третий, четвертый .......... таймер и т. Д., Работает только первый таймер. Никакой другой таймер не работает для меня. Это мой код. Кто-нибудь может мне помочь, пожалуйста.Добавить таймеры с помощью jQuery

<html> 
    <head> 
     <script type="text/javascript" src="jquery.js"></script> 
    </head> 
    <body> 
     <script> 
      window.onload=function(){document.getElementById('time').innerHTML = "00" + ":" +"00" + ":" + "00";} 
     </script> 

     <div class="timers" id="act"> 
      <div id="time"></div> 
      <div class="timer_controls"> 
       <input class="btnStart" id="start" type="button" value="Start" onclick="timer()" /> 
       <input class="btnreset" id="reset" type="button" value="Reset" onclick="reset()" /> 
       <input class="btnStop" id="stop" type="button" value="Stop" onclick="stopper()" /> 
      </div> 
     </div> 

     <input id="appends" type="button" value="append" /> 
     <div class="container"></div> 

     <style type="text/css"> 
      #time{ 
       font-size:50pt; 
      } 
      .container{ 
       float:left; 
       width:100%; 
       height:1000px; 
      } 
     </style> 

     <script type="text/javascript"> 
      i = 0; 
      var w; 

      function timer() { 
       if (i > 3599) { 
        var H = Math.floor(i/3600); 
       } 
       else { 
        var H = 0; 
       } 

       var M = i - (H * 3600) 

       if (M > 59) { 
        M = Math.floor(M/60) 
       } 
       else { 
        M = 0 
       } 

       var S = i - (M * 60) 
       if (S > 3599) { 
        S = Math.floor(M/3600) 
       } 

       if (H < 10) { 
        H = "0" + H; 
       } 
       if (M < 10) { 
        M = "0" + M; 
       } 
       if (S < 10) { 
        S = "0" + S; 
       } 

       document.getElementById('time').innerHTML = H + ":" + M + ":" + S; 
       w=setTimeout('timer()', 1000); 
       i++; 
      } 

      function stopper(){ 
       clearTimeout(w); 
      } 

      function reset() { 
       i=0; 
       document.getElementById('time').innerHTML = "00" + ":" +"00" + ":" + "00"; 
       clearTimeout(w); 
      } 

      $("#appends").click(function() { 
       var index = $('.timers').length; 
       clearTimeout(w); 
       var timing=$('.timers').html(); 
       $('.container').append('<div class="timers" id="act_'+(index+1)+'">'+timing+'<input   class="btnStart" id="start'+(index+1)+'" type="button" value="Start" onclick="timer()" />'+'</div>'); 
      }); 
     </script> 

     </body> 
    </html>

источник

2013-12-04 Toyson Cruz

Возможно, было бы полезно, если вы попытаетесь создать рабочий пример своего кода в [JSFiddle] (http://jsfiddle.net/). Я попытался сделать это за вас, но не смог заставить его работать. Таким образом, мы будем намного лучше и способны помочь вам. – johnkavanagh

Это потому, что вы используете 'id' для таргетинга на таймер вместо' class'. Следовательно, только первый элемент с 'id = time' нацелен независимо от того, какую кнопку вы нажимаете. Попробуйте создать класс JavaScript с использованием прототипов. Таким образом, вы можете создать повторно используемый компонент таймера. –

Простой способ показать свой код - использовать http://jsfiddle.net или http://plnkr.co/ – paka

У вас может быть только один идентификатор uniqe для HTML-элемента на странице. Каждый раз, когда вы добавляете новый таймер, все они имеют одинаковый идентификатор. Поэтому вам нужно изменить некоторую логику своего сценария.

источник

2013-12-04 12:11:58 paka

Добавить таймеры с помощью jQuery

ответ

Смежные вопросы