jQueryストップウォッチ（ミリ秒）

Question

jQueryでこの有益なJSを数時間、分、秒のストップウォッチで見つけました。 http://daokun.webs.com/jquery.stopwatch.js

時間カウンタは私には役に立たないと思いますが、私はむしろミリ秒カウンターを表示しています。 私は、これはそれを起動するボタンにリンクアップJS使用しています：

$('.easy').click(function(){ 
$("#demo").stopwatch().stopwatch('start');}); 

簡単にカウンターを停止何されるボタンのためのクラスであることと、デモはDIV

<div id="demo" >00:00:00</div> 

ためのIDであることプログレスバーの場合、else文：そのほかのため

else{ 
    $("#demo").stopwatch().stopwatch('stop');   
    } 

コードが実際に長く、バーが100に当たった後、カウンタが停止し、私は0からの残りの部分をカバーしていることを意味しif文とif文を使って99

とにかく、そのJSは分、秒、ミリ秒のカウンタを持つように編集できますか？または、このようなカウンタを持つ他のjQueryプラグインがありますか？

Answer 1

あなたは本当にイベントがないが、プラグインを使用する必要があり、それは同じくらい簡単ですsetInterval()を使用して独自のタイマーを作成します。これはまさにストップウォッチプラグインの機能です。

jsFiddle

HTML

<div id="timer"><span class="value">0</span> ms</div>​ 

JS

setInterval(updateDisplay, 1); // every millisecond call updateDisplay 

function updateDisplay() { 
    var value = parseInt($('#timer').find('.value').text(), 10); 
    value++; 
    $('#timer').find('.value').text(value); 
}​ 

Answer 2

あなたはコードを見たい場合は、あなたが変更する可能性defaultFormatMilliseconds（）関数を見つけるだろう：

return [pad2(hours), pad2(minutes), pad2(seconds), millis].join(':'); 
                ^^^^^^^^---add milliseconds. 

Answer 3

それは私たちが最後のミリ秒単位まで正確に数えて見ることができますように、私は、コードを変更しようとしましたしかし、ちょうどストップウォッチが遅くなりました（今のところ、スローダウンがブラウザ/システムのハードウェアに依存しているかどうかはわかりません）。

とにかく、これらのコードでは、更新間隔を最大100まで指定できます（したがって、ストップウォッチは最大0.0秒まで正確に表示されます）。

EDIT： jinvtervals.jsを含めていないので、ストップウォッチはデフォルトのフォーマッタを使用します。

Javascriptを：

function defaultFormatMilliseconds(x) { 
    var millis, seconds, minutes, hours; 
    millis = Math.floor((x % 1000)/100); 
    x /= 1000; 
    seconds = Math.floor(x % 60); 
    x /= 60; 
    minutes = Math.floor(x % 60); 
    x /= 60; 
    hours = Math.floor(x % 24); 
    // x /= 24; 
    // days = Math.floor(x); 
    return [pad2(hours), pad2(minutes), pad2(seconds)].join(':') + "." + millis; 
} 

HTML

<script type="text/javascript"> 

    $(function() { 
     $('#swhTimeExposed').stopwatch({ 
      updateInterval: 100 
     }); 

     $('#btnSearch').button({ 
      icons: { 
       primary: "ui-icon-clock" 
      }, 
      text: true 
     }) 
      .bind('click', function (e) { 
       // Start Stop watch 
       $('#swhTimeExposed').stopwatch('start'); 
      } 
     ); 
    }); 
</script> 

<span id="swhTimeExposed"> 00:00:00.0 </span> 
<button type="submit" id="btnSearch" >Start</button>