的jQuery：秒表

Question

我使用stopwatch代码我发现这里： http://www.kellishaver.com/projects/stopwatch/

(function($) { 
    $.fn.stopwatch = function() { 
     var clock = this; 
     var timer = 0; 

     clock.addClass('stopwatch'); 

     //console.log(clock); 

     // This is bit messy, but IE is a crybaby and must be coddled. 
     clock.html('<div class="display"><span class="hr">00</span>:<span class="min">00</span>:<span class="sec">00</span></div>'); 
     clock.append('<input type="button" class="start" value="Start" />'); 
     clock.append('<input type="button" class="stop" value="Stop" />'); 
     clock.append('<input type="button" class="reset" value="Reset" />'); 

     //console.log(clock.html()); 

     // We have to do some searching, so we'll do it here, so we only have to do it once. 
     var h = clock.find('.hr'); 
     var m = clock.find('.min'); 
     var s = clock.find('.sec'); 
     var start = clock.find('.start'); 
     var stop = clock.find('.stop'); 
     var reset = clock.find('.reset'); 

     stop.hide(); 

     start.bind('click', function() { 
      timer = setInterval(do_time, 1000); 
      stop.show(); 
      start.hide(); 
     }); 

     stop.bind('click', function() { 
      clearInterval(timer); 
      timer = 0; 
      start.show(); 
      stop.hide(); 
     }); 

     reset.bind('click', function() { 
      clearInterval(timer); 
      timer = 0; 
      h.html("00"); 
      m.html("00"); 
      s.html("00"); 
      stop.hide(); 
      start.show(); 
     }); 

     function do_time() { 
      // parseInt() doesn't work here... 
      hour = parseFloat(h.text()); 
      minute = parseFloat(m.text()); 
      second = parseFloat(s.text()); 

      second++; 

      if(second > 59) { 
       second = 0; 
       minute = minute + 1; 
      } 
      if(minute > 59) { 
       minute = 0; 
       hour = hour + 1; 
      } 

      h.html("0".substring(hour >= 10) + hour); 
      m.html("0".substring(minute >= 10) + minute); 
      s.html("0".substring(second >= 10) + second); 
     } 
    }; 
})(jQuery); 

我用它是这样的：

<script type="text/javascript"> 
    $('#clock1').stopwatch(); 
</script> 

它工作正常，我可以用它停止停止按钮。不过，我希望能够使用JavaScript以编程方式阻止它。事情是这样的：

<script type="text/javascript"> 
    $('#clock1').stop(); 
</script> 

我创建了stop功能，但我不能访问stopwatch()定义的timer变种。我该怎么做？

Answer 1

您可以添加一个小API的代码，并使用$.data其附加：

var api = { 
    stop: function() { 
     stop.click(); // this should probably be improved, but you get the idea 
    } 
}; 
$(clock).data('stopwatch', api); 

然后使用：

$('#clock1').data('stopwatch').stop(); 

您还可以添加使用相同的逻辑，reset和start对API起作用。这里的一个好处是，您可以稍后改进咖啡休息时的执行代码，而不会改变外部程序使用API​​的方式。

Answer 2

如何：

$('#clock1').find('.stop').trigger('click');