javascriptjquerycounterstopwatch

jQuery Stopwatch with milliseconds


I've found this usefull JS in jQuery for a stopwatch having hours, minutes and seconds. http://daokun.webs.com/jquery.stopwatch.js

Thing is, the hour counter is useless for me, I'd rather have a milliseconds counter showing up. I'm using this JS linked up to a button to start it:

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

Easy being the class for the button and Demo being the ID for the DIV

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

What stops the counter is a if, else statement from a progress bar:

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

The code for that else is actually longer and the counter stops once the bar hits 100, means that I covered up the rest from 0 to 99 with if and else if statements.

Anyway, how can that JS be edited to have a counter with minues, seconds and milliseconds? Or is there is any other jQuery plugin to have such counter?


Solution

  • You really don't event need to use the plugin, it's as simple as using setInterval() to make your own timer, which is exactly what the stopwatch plugin does.

    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);
    }​