CODEWITHSUNDEEP
javascriptjquerycounterstopwatch
Marian
Marian

Reputation: 191

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?

Upvotes: 2

Views: 19701

Answers (5)

Quentin Kramer
Quentin Kramer

Reputation: 25

For the future searcher: the accepted answer has comments that point out that in implementation it is unusably slow. However, with a few tweaks it can be made usable. The first is to make the count reference the difference between now and a given starting point and not just add one on each iteration. This accommodates the actual elapsed milliseconds being variable between each iteration. Additionally, finding the control on each iteration is relatively expensive, whereas making a constant handle to the same control is not.

HTML

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

JS

// Get a const starting reference point
const startTime = Date.now();
// Get a const handle to control
const theControl = $('#timer').find('.value'); // or just $( '.value' )
// Start the interval with a better setTimeout instead
// of setInterval which could interrupt async ops and do bad things
updateDisplay();

function updateDisplay(){
  const value = Date.now() - startTime;
  theControl.text( value );
  setTimeout( () => updateDisplay(), 1 );
}

With this implementation it is responsive and reflective of actual elapsed time.

Upvotes: 0

Mihir Sangani
Mihir Sangani

Reputation: 1

$(document).ready(function () {
    $(".resume,.restart").hide();
    $(".present_condition").hide().first().show();
    var timer;
    var h, m, s, c = 99;

    // Start Event
    $(".start").click(function () {
        $(".present_condition").not($(".present_condition").eq(3).show()).hide();
        $(".pause,.stop,.reset").attr('disabled', false);
        startRestartInterval();
    });

    // Stop Event
    $(".stop").click(function () {
        $(".present_condition").not($(".present_condition").eq(1).show()).hide();
        $(".pause,.stop").attr('disabled', true);
        $(".reset,.restart").attr('disabled', false);
        $(".start,.resume").hide();
        $(".restart").show();
        getValues();
        pauseAt = (`STOPPED AT: ${h} HH, ${m} MM, ${s} SS.`);
        $("#stopTimeStamp").html("<p>" + pauseAt + "</p>");
        clearInterval(timer);
    });

    // Restart Event
    $(".restart").click(function () {
        $(".present_condition").not($(".present_condition").eq(3).show()).hide();
        h = m = s = c = 0;
        startRestartInterval();
        $(".pause,.stop").attr('disabled', false);
        $(".start").attr('disabled', true);
        $(".start").show();
        $(".resume,.restart").hide();
    });

    // Pause Event
    $(".pause").click(function () {
        getValues();
        pauseAt = "PAUSE AT: " + h + " HH, " + m + " MM, " + s + " SS.";
        $(".pauseValue").css("color", "blue").text(pauseAt);
        $("#pauseTimeStamp").append("<p>" + pauseAt + "</p>");
        $(".present_condition").not($(".present_condition").eq(2).show()).hide();
        $(".start,.restart").hide();
        $(".resume").show();
        $(".pause").attr('disabled', true);
        $(".resume").attr('disabled', false);
        clearInterval(timer);
    });

    // Resume Event
    $(".resume").click(function () {
        getValues();
        startRestartInterval();
        $(".start").show();
        $(".resume,.restart").hide();
        $(".pause,.stop").attr('disabled', false);
        $(".start").attr('disabled', true);
        $(".present_condition").not($(".present_condition").eq(3).show()).hide();
    });

    // Reset Event
    $(".reset").click(function () {
        clearInterval(timer);
        $("#pauseTimeStamp,#stopTimeStamp").empty();
        $("th").text("00");
        $(".start").show();
        $(".resume,.restart").hide();
        $(".pause,.stop,.reset").attr('disabled', true);
        $(".start").attr('disabled', false);
        $(".present_condition").hide().first().show();
    });

    // Functions
    function startRestartInterval() {
        timer = setInterval(function () {
            if (c < 99) {
                c++;
            }
            else {
                c = 0;
                if (s < 59) {
                    s++;
                } else {
                    s = 0;
                    if (m < 59) {
                        m++;
                    } else {
                        m = 0;
                        if (h < 59) {
                            h++;
                        }
                    }
                }
            }
            $("th").eq(0).text((h < 10) ? ("0" + h) : h);
            $("th").eq(1).text((m < 10) ? ("0" + m) : m);
            $("th").eq(2).text((s < 10) ? ("0" + s) : s);
            $("th").eq(3).text((c < 10) ? ("0" + c) : c);
        }, 10);
    }
    function getValues() {
        h = parseInt($("#hr").text());
        m = parseInt($("#min").text());
        s = parseInt($("#sec").text());
        c = parseInt($("#cSec").text());
    }
});
.btn {
  margin-top: 10px;
}
.green {
  color: #b58b00;
}
.blue {
  color: #005ce6;
}
.red {
  color: red;
}
.dark {
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="heading">
        <h1>STOPWATCH</h1>
    </div>
    <div class="timeBar">
        <table>
            <tr>
                <th class="time_slot" id="hr">00</th>
                <th class="time_slot" id="min">00</th>
                <th class="time_slot" id="sec">00</th>
                <th class="time_slot" id="cSec">00</th>
            </tr>
            <tr>
                <td class="heading_slot">Hours</td>
                <td class="heading_slot">Minutes</td>
                <td class="heading_slot">Seconds</td>
                <td class="heading_slot">C-Seconds</td>
            </tr>
        </table>
    </div>
    <div class="buttonBar">
        <button type="button" disabled class="btn restart green">Restart</button>
        <button type="button" class="btn start green">Start</button>
        <button type="button" disabled class="btn resume green">Resume</button>
        <button type="button" disabled class="btn pause blue">Pause</button>
        <button type="button" disabled class="btn stop red">Stop</button>
        <button type="button" disabled class="btn reset dark">Reset</button>
    </div>
    <div class="messageBar">
        <h4 class="dark present_condition">ENTER TIME & HIT START..!</h4>
        <h4 class="red present_condition">STOPPED</h4>
        <h4 class="present_condition"><span class="pauseValue"></span></h4>
        <h4 class="green present_condition">RUNNING...</h4>
    </div>
    <div class="blue history" id="pauseTimeStamp"></div>
    <div class="red history" id="stopTimeStamp"></div>
</body>

Upvotes: 0

RoyceBautista
RoyceBautista

Reputation: 100

I tried modifying the codes so that it will allow us to see counting accurate up to the last millisecond, but that just made the stopwatch slower (as of now, I don't know if the slow down is browser/system hardware dependent).

Anyway, these codes will allow you to specify an update interval up to 100 (Hence giving you a stop watch accurate up to 0.0 seconds, without slowing down).

EDIT: I didn't include jinvtervals.js so that the stopwatch will use the default formatter.

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>

Upvotes: 1

Gabe
Gabe

Reputation: 50493

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

Upvotes: 3

Marc B
Marc B

Reputation: 360602

If you'd looked through the code, you'd find the defaultFormatMilliseconds() function, which you could modify:

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

Upvotes: 2

Related Questions