多个秒表

Question

我想在jQuery的倍数秒表，但问题是我想要的秒表各自秒表太阳升起时，我们打相应的按钮，应该停止时，我们打按钮另一秒表和相应的秒表应该同时启动，请参阅图像以供参考，我知道这个问题不是很清楚，抱歉给您造成不便。

在此先感谢。

Answer 1

试试这个：

$(document).ready(function() { 

    (function($){ 

     $.extend({ 

      APP : {     

       formatTimer : function(a) { 
        if (a < 10) { 
         a = '0' + a; 
        }        
        return a; 
       },  

       startTimer : function(dir) { 

        var a; 

        // save type 
        $.APP.dir = dir; 

        // get current date 
        $.APP.d1 = new Date(); 

        switch($.APP.state) { 

         case 'pause' : 

          // resume timer 
          // get current timestamp (for calculations) and 
          // substract time difference between pause and now 
          $.APP.t1 = $.APP.d1.getTime() - $.APP.td;        

         break; 

         default : 

          // get current timestamp (for calculations) 
          $.APP.t1 = $.APP.d1.getTime(); 

          // if countdown add ms based on seconds in textfield 
          if ($.APP.dir === 'cd') { 
           $.APP.t1 += parseInt($('#cd_seconds').val())*1000; 
          }  

         break; 

        }         

        // reset state 
        $.APP.state = 'alive'; 
        $('#' + $.APP.dir + '_status').html('Running'); 

        // start loop 
        $.APP.loopTimer(); 

       }, 

       pauseTimer : function() { 

        // save timestamp of pause 
        $.APP.dp = new Date(); 
        $.APP.tp = $.APP.dp.getTime(); 

        // save elapsed time (until pause) 
        $.APP.td = $.APP.tp - $.APP.t1; 

        // change button value 
        $('#' + $.APP.dir + '_start').val('Resume'); 

        // set state 
        $.APP.state = 'pause'; 
        $('#' + $.APP.dir + '_status').html('Paused'); 

       }, 

       stopTimer : function() { 

        // change button value 
        $('#' + $.APP.dir + '_start').val('Restart');      

        // set state 
        $.APP.state = 'stop'; 
        $('#' + $.APP.dir + '_status').html('Stopped'); 

       }, 

       resetTimer : function() { 

        // reset display 
        $('#' + $.APP.dir + '_ms,#' + $.APP.dir + '_s,#' + $.APP.dir + '_m,#' + $.APP.dir + '_h').html('00');     

        // change button value 
        $('#' + $.APP.dir + '_start').val('Start');      

        // set state 
        $.APP.state = 'reset'; 
        $('#' + $.APP.dir + '_status').html('Reset & Idle again'); 

       }, 

       endTimer : function(callback) { 

        // change button value 
        $('#' + $.APP.dir + '_start').val('Restart'); 

        // set state 
        $.APP.state = 'end'; 

        // invoke callback 
        if (typeof callback === 'function') { 
         callback(); 
        }  

       },  

       loopTimer : function() { 

        var td; 
        var d2,t2; 

        var ms = 0; 
        var s = 0; 
        var m = 0; 
        var h = 0; 

        if ($.APP.state === 'alive') { 

         // get current date and convert it into 
         // timestamp for calculations 
         d2 = new Date(); 
         t2 = d2.getTime(); 

         // calculate time difference between 
         // initial and current timestamp 
         if ($.APP.dir === 'sw') { 
          td = t2 - $.APP.t1; 
         // reversed if countdown 
         } else { 
          td = $.APP.t1 - t2; 
          if (td <= 0) { 
           // if time difference is 0 end countdown 
           $.APP.endTimer(function(){ 
            $.APP.resetTimer(); 
            $('#' + $.APP.dir + '_status').html('Ended & Reset'); 
           }); 
          }  
         }  

         // calculate milliseconds 
         ms = td%1000; 
         if (ms < 1) { 
          ms = 0; 
         } else {  
          // calculate seconds 
          s = (td-ms)/1000; 
          if (s < 1) { 
           s = 0; 
          } else { 
           // calculate minutes 
           var m = (s-(s%60))/60; 
           if (m < 1) { 
            m = 0; 
           } else { 
            // calculate hours 
            var h = (m-(m%60))/60; 
            if (h < 1) { 
             h = 0; 
            }        
           }  
          } 
         } 

         // substract elapsed minutes & hours 
         ms = Math.round(ms/100); 
         s = s-(m*60); 
         m = m-(h*60);         

         // update display 
         $('#' + $.APP.dir + '_ms').html($.APP.formatTimer(ms)); 
         $('#' + $.APP.dir + '_s').html($.APP.formatTimer(s)); 
         $('#' + $.APP.dir + '_m').html($.APP.formatTimer(m)); 
         $('#' + $.APP.dir + '_h').html($.APP.formatTimer(h)); 

         // loop 
         $.APP.t = setTimeout($.APP.loopTimer,1); 

        } else { 

         // kill loop 
         clearTimeout($.APP.t); 
         return true; 

        } 

       } 

      }  

     }); 

     $('#sw_start').live('click', function() { 
      $.APP.startTimer('sw'); 
     });  

     $('#cd_start').live('click', function() { 
      $.APP.startTimer('cd'); 
     });   

     $('#sw_stop,#cd_stop').live('click', function() { 
      $.APP.stopTimer(); 
     }); 

     $('#sw_reset,#cd_reset').live('click', function() { 
      $.APP.resetTimer(); 
     }); 

     $('#sw_pause,#cd_pause').live('click', function() { 
      $.APP.pauseTimer(); 
     });     

    })(jQuery); 

}); 

DEMO HERE

OR

$(function() { 

    // Never assume one widget is just used once in the page. You might 
    // think of adding a second one. So, we adjust accordingly. 
    $('.stopwatch').each(function() { 

     // Cache very important elements, especially the ones used always 
     var element = $(this); 
     var running = element.data('autostart'); 
     var hoursElement = element.find('.hours'); 
     var minutesElement = element.find('.minutes'); 
     var secondsElement = element.find('.seconds'); 
     var millisecondsElement = element.find('.milliseconds'); 
     var toggleElement = element.find('.toggle'); 
     var resetElement = element.find('.reset'); 
     var pauseText = toggleElement.data('pausetext'); 
     var resumeText = toggleElement.data('resumetext'); 
     var startText = toggleElement.text(); 

     // And it's better to keep the state of time in variables 
     // than parsing them from the html. 
     var hours, minutes, seconds, milliseconds, timer; 

     function prependZero(time, length) { 
      // Quick way to turn number to string is to prepend it with a string 
      // Also, a quick way to turn floats to integers is to complement with 0 
      time = '' + (time | 0); 
      // And strings have length too. Prepend 0 until right. 
      while (time.length < length) time = '0' + time; 
      return time; 
     } 

     function setStopwatch(hours, minutes, seconds, milliseconds) { 
      // Using text(). html() will construct HTML when it finds one, overhead. 
      hoursElement.text(prependZero(hours, 2)); 
      minutesElement.text(prependZero(minutes, 2)); 
      secondsElement.text(prependZero(seconds, 2)); 
      millisecondsElement.text(prependZero(milliseconds, 3)); 
     } 

     // Update time in stopwatch periodically - every 25ms 
     function runTimer() { 
      // Using ES5 Date.now() to get current timestamp    
      var startTime = Date.now(); 
      var prevHours = hours; 
      var prevMinutes = minutes; 
      var prevSeconds = seconds; 
      var prevMilliseconds = milliseconds; 

      timer = setInterval(function() { 
       var timeElapsed = Date.now() - startTime; 

       hours = (timeElapsed/3600000) + prevHours; 
       minutes = ((timeElapsed/60000) + prevMinutes) % 60; 
       seconds = ((timeElapsed/1000) + prevSeconds) % 60; 
       milliseconds = (timeElapsed + prevMilliseconds) % 1000; 

       setStopwatch(hours, minutes, seconds, milliseconds); 
      }, 25); 
     } 

     // Split out timer functions into functions. 
     // Easier to read and write down responsibilities 
     function run() { 
      running = true; 
      runTimer(); 
      toggleElement.text(pauseText); 
     } 

     function pause() { 
      running = false; 
      clearTimeout(timer); 
      toggleElement.text(resumeText); 
     } 

     function reset() { 
      running = false; 
      pause(); 
      hours = minutes = seconds = milliseconds = 0; 
      setStopwatch(hours, minutes, seconds, milliseconds); 
      toggleElement.text(startText); 
     } 

     // And button handlers merely call out the responsibilities 
     toggleElement.on('click', function() { 
      (running) ? pause() : run(); 
     }); 

     resetElement.on('click', function() { 
      reset(); 
     }); 

     // Another advantageous thing about factoring out functions is that 
     // They are reusable, callable elsewhere. 
     reset(); 
     if(running) run(); 
    }); 

}); 

DEMO HERE