How to show milliseconds in count down timer javascript

Question

I have a javascript code that displays a count down timer from 5 minutes.

This is the code

var mins
var secs;

function cd() {
    mins = 1 * m("05"); // change minutes here
    secs = 0 + s(":00"); // change seconds here (always add an additional second to your total)
    redo();
}

function m(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(0, i));
}

function s(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs) {
    var disp;
    if(mins <= 9) {
        disp = " 0";
    } else {
        disp = " ";
    }
    disp += mins + ":";
    if(secs <= 9) {
        disp += "0" + secs;
    } else {
        disp += secs;
    }
    return(disp);
}

function redo() {
    secs--;
    if(secs == -1) {
        secs = 59;
        mins--;
    }

     var timerStr = dis(mins,secs); 
    $("#countDownTimer").text(timerStr);  // setup additional displays here.
    if((mins == 0) && (secs == 0)) {

    } else {
        cd = setTimeout("redo()",1);
    }


}

function init() {
  cd();
}

window.onload = init;

How can i change the script to show milliseconds too

or is there any simple script to show the count down timer including minutes:seconds:milliseconds

possible duplicate of [jQuery 1 minute countdown with milliseconds and callback](http://stackoverflow.com/questions/3020062/jquery-1-minute-countdown-with-milliseconds-and-callback) see also [javascript countdown with showing milliseconds](http://stackoverflow.com/questions/4870569/javascript-countdown-with-showing-milliseconds). — Matt Ball, Nov 09 '11 at 16:11

score 3 · Answer 1 · answered Nov 09 '11 at 15:48

You're calling the timeout with a parameter of 1, which means 1millisecond per timer 'event', but you're treating that millisecond event as a full second in your redo() function.

redo() should be:

function redo() {
   s -= 0.001; // subtract 1 millisecond
   if (s < 0) {
      secs = 59.999;
      mins--;
   }
}

and so on. However, given that running this code every millisecond is going to put a fairly heavy load on the browser, and will not run with exact millisecond precision. What you should be doing is keeping track of TIME - when you start the countdown, record the current system time using the Date() object, which has millisecond precision.

Invoke your redo() at some longer interval than milliseconds (say, every 200ms / 0.2 seconds), and then subtract the system time at that point from the start time of the timer.

i need to display the milliseconds too. There is a small change in the codeie iam calling the function in each seconds ie cd = setTimeout("redo()",1000);.So how should we change this.Thank you for your suggestion — Linto, Nov 09 '11 at 16:00
The JS Date object has milliseconds: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date — Marc B, Nov 09 '11 at 16:01

nisr.com · Accepted Answer · 2011-11-09T16:36:19.990

3

I reworked the code to include milliseconds. Also make sure the setTimer is set correctly.

var mins
var secs;
var ms;

function cd() {
    mins = 1 * m("05"); // change minutes here
    secs = 0 + s(":00"); // change seconds here (always add an additional second to your total)
    ms = 0 + ms(":00");//change millisecons here
    redo();
}

function m(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(0, i));
}

function s(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(i + 1, obj.length));
}

function ms(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs,ms) {
    var disp;
    if(mins <= 9) {
        disp = " 0";
    } else {
        disp = " ";
    }
    disp += mins + ":";
    if(secs <= 9) {
        disp += "0" + secs;
    } else {
        disp += secs + ":";
    }
    if(ms <= 9) {
        disp += "0" + ms;
    } else {
        disp += ms;
    }
    return(disp);
}

function redo() {
    ms--;
    if(ms == -1) {
        ms = 99;
        secs--;
    }
    if(secs == -1) {
        secs = 59;
        mins--;
    }

     var timerStr = dis(mins,secs,ms); 
    document.getElementById('countdown_fld').innerText=timerStr;  // setup additional displays here.
    if((mins == 0) && (secs == 0) && (ms == 0)) {

    } else {
        cd = setTimeout("redo()",10); //make sure to set the timer right
    }


}

function init() {
  cd();
}

edited Nov 09 '11 at 16:36

answered Nov 09 '11 at 16:10

nisr.com

46
3

yea, there was a small change in my code,the functionwas calling in each seconds ie cd = setTimeout("redo()",1000); – Linto Nov 09 '11 at 16:20
Thanks for your help,let me know milliseconds should be in 000,right?.As 1000 milliseconds =1 second – Linto Nov 09 '11 at 16:21
1000 = 1 second so... If you set it to 100 that will emulate milliseconds sufficiently. – nisr.com Nov 09 '11 at 16:22
Again thanks.But it display the countdown from 10millisecond.It should be from 1000 milliseconds na? – Linto Nov 09 '11 at 16:26
Yes you could... the other two millisecond digits move so fast it is a blur :-). – nisr.com Nov 09 '11 at 16:28
so are you saying the milliseonds is counting from 1000 itself? – Linto Nov 09 '11 at 16:31
Lot of thanks, can you make it 05:00:999.That should be the right one? – Linto Nov 09 '11 at 16:40
Welcome. setTimeout wont increment fast enough to correctly subtract all the milliseconds by the ones. – nisr.com Nov 09 '11 at 16:57
Hi nisr.com. the speed of seconds count down is different in different browser.What may be the reason – Linto Nov 10 '11 at 20:21

score 1 · Answer 3 · edited May 23 '17 at 11:47

1

How about using one of the many jQuery countdown plugins out there, such as http://keith-wood.name/countdown.html or http://code.google.com/p/jquery-countdown/?

Upon further inspection:

edited May 23 '17 at 11:47

Community

1
1

answered Nov 09 '11 at 15:45

Matt Ball

354,903
100
647
710

but is there option to display milli seconds? – Linto Nov 09 '11 at 15:58
See my edit. The answer is, generally, "no," but as per the first answer I linked, that's probably a good thing. – Matt Ball Nov 09 '11 at 16:11

How to show milliseconds in count down timer javascript

3 Answers3

Linked