毫秒級的jQuery秒錶

我在jQuery中發現了這個有用的JS，用於有秒，分，秒的秒錶。 http://daokun.webs.com/jquery.stopwatch.js 毫秒級的jQuery秒錶

事情是，小時計數器是無用的，我寧願有一個毫秒計數器顯示出來。我使用這個js鏈接到一個按鈕來啓動它：

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

一件容易的按鈕的類和演示作爲ID爲DIV

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

什麼停止計數器一個如果，從一個進度條else語句：

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

對於其他的代碼實際上是長和計數器停止一旦小節達到100，這意味着我掩蓋了其餘的從0到99與if和else if語句。

無論如何，JS如何被編輯爲具有微秒，秒和毫秒的計數器？或者是否有任何其他jQuery插件有這樣的計數器？

來源

2012-03-01 Marian

你真的不活動需要使用的插件，它是那樣簡單因爲使用setInterval()來製作自己的計時器，這正是秒錶插件的功能。

jsFiddle

HTML

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

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

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

來源

2012-03-01 17:15:01 Gabe

如果updateDisplay需要2毫秒執行會怎麼樣？那麼這不會變得特別準確或有用。 *也許*這是插件試圖解決的問題。 – 2012-03-01 17:19:16

看看秒錶插件的來源，它做的是完全相同的事情。 – Gabe 2012-03-01 17:21:39

事情是，我仍然在學習JS和jQuery代碼和命令，我不是那種我想學習的東西。我查看了插件源，發現它是這樣做的，使用math.floor它計算秒數，分數等。我需要的是編輯源文件以顯示毫秒。我試圖使用上面的解決方案，並將其顯示爲毫秒乘以1000 – Marian 2012-03-01 17:36:48

如果你想通過代碼看，你會發現defaultFormatMilliseconds（）函數，你可以修改：

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

來源

2012-03-01 17:13:09

是的它的廣告毫秒，問題是現在，他們顯示爲毫秒* 1000 計數器御所爲 1：1000 2：2000 3：3000 它計數millis不是1到1但是1000到1000 – Marian 2012-03-01 17:27:31

我試圖修改代碼，以便它可以讓我們看到計算精確到了一毫秒，但是這只是讓秒錶變慢（截至目前，不知道減速是否依賴於瀏覽器/系統硬件）。

無論如何，這些代碼將允許您指定一個更新間隔高達100（因此，給你一個秒錶精確到0.0秒，沒有減速）。

編輯：我沒有包含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>

來源

2015-02-18 12:31:37 Gelo32k

毫秒級的jQuery秒錶

回答

相關問題