I am having trouble making a stopwatch that only uses 2 digits for the milliseconds part. I have the full JSFiddle here. The function I could use some help with is the formatter() method.

Right now, the method looks like this:

formatter(timeInMilliseconds) {
  const padZero = (time) => {
    while (time.length < 2) { 
      time = '0' + time; 
    } 
    return time;
  }

  let time = new Date(timeInMilliseconds);
  let minutes = padZero(time.getMinutes().toString());
  let seconds = padZero(time.getSeconds().toString());
  let milliseconds = padZero((time.getMilliseconds() / 10).toFixed(0));

  let output = `${minutes} : ${seconds} . ${milliseconds}`;
  console.log(output);
  return output;
} 

For the most part, it works. The problem though is very visible if you look at the console of my JSFiddle while the timer is running. For example, if the stopwatch is currently at something like 00 : 15 . 99, it will bee 00 : 15 . 100 at the next tick instead of 00 : 16 . 00.

Any help would be appreciated.

I am having trouble making a stopwatch that only uses 2 digits for the milliseconds part. I have the full JSFiddle here. The function I could use some help with is the formatter() method.

Right now, the method looks like this:

formatter(timeInMilliseconds) {
  const padZero = (time) => {
    while (time.length < 2) { 
      time = '0' + time; 
    } 
    return time;
  }

  let time = new Date(timeInMilliseconds);
  let minutes = padZero(time.getMinutes().toString());
  let seconds = padZero(time.getSeconds().toString());
  let milliseconds = padZero((time.getMilliseconds() / 10).toFixed(0));

  let output = `${minutes} : ${seconds} . ${milliseconds}`;
  console.log(output);
  return output;
} 

For the most part, it works. The problem though is very visible if you look at the console of my JSFiddle while the timer is running. For example, if the stopwatch is currently at something like 00 : 15 . 99, it will bee 00 : 15 . 100 at the next tick instead of 00 : 16 . 00.

Any help would be appreciated.

• javascript
• datetime

• I would appreciate it if I was given suggestions on improving my question instead of given downvotes. – Saad Commented Jan 3, 2016 at 23:52

3 Answers 3

toFixed rounds rather than truncating, so 995 milliseconds and up will bee 99.5 and be formatted to 100 by toFixed. You can convert it to an integer and then to a string instead to truncate it:

let milliseconds = padZero('' + (time.getMilliseconds() / 10 | 0));

It might also be a nice simplification to make padZero accept a number rather than a string:

function padZero(time) {
    return time < 10 ? '0' + time : '' + time;
}

let time = new Date(timeInMilliseconds);
let minutes = padZero(time.getMinutes());
let seconds = padZero(time.getSeconds());
let milliseconds = padZero(time.getMilliseconds() / 10 | 0);

let output = `${minutes} : ${seconds} . ${milliseconds}`;

Finally, if timeInMilliseconds isn’t a timestamp in milliseconds since 1970-01-01 00:00:00 UTC and is instead a duration, it’s inappropriate to convert it to a Date. Just do some math:

const minutes = padZero(timeInMilliseconds / 60000 | 0);
const seconds = padZero((timeInMilliseconds / 1000 | 0) % 60);
const centiseconds = padZero((timeInMilliseconds / 10 | 0) % 100);

Your problem is that .toFixed() rounds instead of truncating.

(99.4).toFixed(0) == '99'
(99.5).toFixed(0) == '100'

All you need to do is replace

(time.getMilliseconds() / 10).toFixed(0)

with

Math.floor(time.getMilliseconds() / 10).toFixed(0)

and it'll work.

You can use substring()

let milliseconds = padZero((time.getMilliseconds() / 10).toFixed(0)).substr(0, 2);