Showing milliseconds in a timer html

Question

How do i show a countdown timer in html? Current code:

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

function timer(){
  count=count-1;

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

Converting seconds to ms

function msToTime(s) {
  var ms = s % 1000;
  s = (s - ms) / 1000;
  var secs = s % 60;
  s = (s - secs) / 60;
  var mins = s % 60;
  var hrs = (s - mins) / 60;

  return hrs + ':' + mins + ':' + secs + '.' + ms;
}

How would i call out the timer? still shows the timer as ms. i want it to show up as 99:00 seconds instead of 9900 milliseconds.

Thanks

Yes but the countdown would show up as a millisecond counter. — Henry Fort, Oct 17 '14 at 20:16
Is that what you want? http://jsfiddle.net/u7t3k5s1/ `setInterval(timer, 1)` not recommended to call function so often as your 'timer' will lie depending on the resources of the computer (it will count slower than the actual time flow). — Cheery, Oct 17 '14 at 20:16
Watch your performance. Running every millisecond **can** cause problems if you're doing big ops in the loop. — ArtOfCode, Oct 17 '14 at 20:19
You can use `setInterval`, but you should actually compare the `Date` when you started with the `Date` now to get an accurate read on the time. Your `setInterval` will definitely not fire every `1ms`. — Matt Burland, Oct 17 '14 at 20:20
@Moob this is what everybody writes in comments - did you try to read them? Browser can not run setInterval function every 1 ms. The idea in the question is incorrect from the beginning and I showed it by realization. — Cheery, Oct 17 '14 at 20:27
BTW, the same question was asked 50 minutes ago.. Flash mob or clones?? http://stackoverflow.com/questions/26432305/adding-milliseconds-to-timer-in-html — Cheery, Oct 17 '14 at 20:31
@Cheery: I'm going to guess homework and vote to close as dupe. — Matt Burland, Oct 17 '14 at 20:33

score 2 · Accepted Answer · answered Oct 17 '14 at 20:27

You can do something like this:

var expires = new Date();

expires.setSeconds(expires.getSeconds() + 60); // set timer to 60 seconds
var counter = setInterval(timer, 1);

function timer() {
    var timeDiff = expires - new Date();

    if (timeDiff <= 0) {
        clearInterval(counter);
        document.getElementById("timer").innerHTML = "00:00";
        return;
    }

    var seconds = new Date(timeDiff).getSeconds();
    var milliSeconds = (new Date(timeDiff).getMilliseconds() / 10).toFixed(0);

    var seconds = seconds < 10 ? "0" + seconds : seconds;
    var milliSeconds = milliSeconds < 10 ? "0" + milliSeconds : milliSeconds;

    document.getElementById("timer").innerHTML = seconds + ":" + milliSeconds; // watch for spelling
}

Here i set the start time from the javascript Date() function and then calculate the difference from current time in the timer() function.

Check it out here: JSFiddle

score 1 · Answer 2 · answered Oct 17 '14 at 20:21

1

If it's JavaScript and has to do with Time I use moment.js http://momentjs.com

Moment defaults to milliseconds as it's first parameter:

moment(9900).format("mm:ss"); Is 9 seconds, displayed as: 00:09

http://plnkr.co/edit/W2GixF?p=preview

answered Oct 17 '14 at 20:21

jmbmage

2,487
3
27
44

score 1 · Answer 3 · answered Oct 17 '14 at 20:27

Here's an actually accurate timer (in that it actually shows the correct amount of time left). setInterval will never call every 1 ms regardless of what you ask for because the actually resolution isn't that high. Nor can you rely on consistency because it's not running in a real-time environment. If you want to track time, compare Date objects:

var count=60000;
var start = new Date();
var counter=setInterval(timer, 1); //1000 will  run it every 1 second

function timer(){
  var left = count - (new Date() - start);

  if (left <= 0){
    clearInterval(counter);
    document.getElementById("timer").innerHTML = msToTime(0) + " seconds";
    return;
  }
  document.getElementById("timer").innerHTML = msToTime(left) + " seconds"; // watch for spelling
}

function msToTime(s) {
  var ms = s % 1000;
  s = (s - ms) / 1000;
  return s + ':' + pad(ms, 3);
}

function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

<div id='timer'></div>

Borrowing from @Cheery's fiddle as a starting point.

Showing milliseconds in a timer html

3 Answers3