StevenPHP StevenPHP - 4 months ago 109
jQuery Question

JQuery countdown timer with milliseconds

I have a very basic lightweight function that counts down from 30 seconds. I have been trying to add milliseconds to it but I can't seem to get it to work correctly.

var count = 30;
var counter = setInterval(timer, 1000); //1000 will run it every 1 second

function timer() {
if (count <= 0) {
clearInterval(counter);
return;
}
count = count - 1;
document.getElementById("timer").innerHTML = count + " secs"; // watch for spelling
}

Answer

Try it this way. Stopwatches only count hundredths of seconds anyway.

var count = 3000;

var counter = setInterval(timer, 10); //10 will  run it every 100th of a second

function timer()
{
    if (count <= 0)
    {
        clearInterval(counter);
        return;
     }
     count--;
     document.getElementById("timer").innerHTML=count /100+ " secs"; 
}

Just for better formatting and testing:

HTML

<span id="timer"></span>

<button id="start">start</button>
<button id="stop">stop</button>
<button id="reset">reset</button>

Javascript

var initial = 30000;
var count = initial;
var counter; //10 will  run it every 100th of a second

function timer() {
    if (count <= 0) {
        clearInterval(counter);
        return;
    }
    count--;
    displayCount(count);
}

function displayCount(count) {
    var res = count / 100;
    document.getElementById("timer").innerHTML = res.toPrecision(count.toString().length) + " secs";
}

$('#start').on('click', function () {
    clearInterval(counter);
    counter = setInterval(timer, 10);
});

$('#stop').on('click', function () {
    clearInterval(counter);
});

$('#reset').on('click', function () {
    clearInterval(counter);
    count = initial;
    displayCount(count);
});

displayCount(initial);

EDIT:

The original question was trying to figure out how to make a display like a stopwatch, and I know very few that actually count milliseconds. That being said, here is a possible solution to do that. It relies on updating as fast as possible, and getting the difference between our last update and our current one to remain accurate.

var initial = 300000;
var count = initial;
var counter; //10 will  run it every 100th of a second
var initialMillis;

function timer() {
    if (count <= 0) {
        clearInterval(counter);
        return;
    }
    var current = Date.now();

    count = count - (current - initialMillis);
    initialMillis = current;
    displayCount(count);
}

function displayCount(count) {
    var res = count / 1000;
    document.getElementById("timer").innerHTML = res.toPrecision(count.toString().length) + " secs";
}

$('#start').on('click', function () {
    clearInterval(counter);
    initialMillis = Date.now();
    counter = setInterval(timer, 1);
});

$('#stop').on('click', function () {
    clearInterval(counter);
});

$('#reset').on('click', function () {
    clearInterval(counter);
    count = initial;
    displayCount(count);
});

displayCount(initial);