Question

19

JQuery countdown timer with milliseconds

rated 0 times [ 23] [ 4] / answers: 1 / hits: 26395 / 10 Years ago, thu, march 13, 2014, 12:00:00

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

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hugo

Add To Favorites

Follow

Total Points: 21

Total Questions: 120

Total Answers: 107

Location: Belarus

Member since Tue, Jul 20, 2021

3 Years ago

answered 10 Years ago cristinadomoniquel · Accepted 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);