How can I fix my Javascript stopwatch with the 00:00 time format? (Seconds:Milliseconds)

Question

Is there any way to get this to run a stopwatch? I dont need any start or stop buttons, it should just run a stopwatch when the page loads and the stopwatch needs to keep running.

I have gotten everything else to work, but I cannot find a function that uses a format of 00:00 for a stopwatch. Is there any command that does that?

The "d.getSeconds()" isnt doing that for me.

new Date();
var testVar = window.setInterval(update, 10);

function update() {
  var d = new Date();
  document.getElementById("seconds").innerHTML = d.getSeconds();
}

#seconds {
  background-color: yellow;
  max-width: 17%;
}

<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>

</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>


</body>

Is there any way to get the innerHTML to just be a regular stopwatch with "00:00" format?

score 1 · Answer 1 · answered Feb 21 '19 at 00:44

You can use padStart, as well as some math, to format the stopwatch:

window.setInterval(update, 1000);
function update(){
    var d = new Date();
    var minutes = Math.floor(d.getSeconds() / 60)
    var seconds = d.getSeconds() % 60
    var time = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    document.getElementById("seconds").innerHTML = time
}

<h1>Stop Watch</h1>
<p>Elapsed Time:</p>
<p id="seconds"></p>

Aniket G · Accepted Answer · 2019-02-21T01:17:06.317

The way you're doing it, the stopwatch could start at any random number (because it starts at the current seconds). I'd suggest simply making your own below. However, if you don't want to make your own, look at the second or third snippet.

var testVar = window.setInterval(update, 10);
var seconds = 0;
var milliseconds = 1;

function update() {
  if (milliseconds == 100) {
    milliseconds = 0;
    seconds++;
  }
  
  if (milliseconds < 10 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":0" + milliseconds;
  }
  else if (milliseconds < 10 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":0" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":" + milliseconds;
  }
  milliseconds++;
}

#seconds {
  background-color: yellow;
  max-width: 17%;
}

<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>
</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds">00:00</p>

If you want to continue doing it the way you were doing it, look at the snippet below. I got minutes and seconds from new Date() and basically formatted it using a few if statements like you wanted.

update();
var testVar = window.setInterval(update, 10);
var seconds;
var milliseconds;
var d;

function update() {
  d = new Date();
  seconds = d.getSeconds();
  milliseconds = Math.floor((d.getMilliseconds() / 10));
  
  if (milliseconds < 10 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":0" + milliseconds;
  }
  else if (milliseconds < 10 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":0" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":" + milliseconds;
  }
}

#seconds {
  background-color: yellow;
  max-width: 17%;
}

<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>
</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>

Is there any way to do this with "Seconds"."Milliseconds"? I tried playing with your code, but it just gave me (example) 55.996. Where the 55 would go up in seconds and the milliseconds would only change the "6". The 99 would stay there. — John Doee, Feb 21 '19 at 01:02
@JohnDoee I'm pretty sure there is. I'll work on it right now — Aniket G, Feb 21 '19 at 01:06
@JohnDoee I updated both snippets to be Seconds:Milliseconds — Aniket G, Feb 21 '19 at 01:17
@JohnDoee the reason it didn't work for you was because 1. It updated every second so the milliseconds wouldn't change. You needed to change the `window.setInterval()`. 2. The milliseconds gave you 3 digits because that's how milliseconds are. I had to divide by 10 to get it to 2 digits — Aniket G, Feb 21 '19 at 01:19
Thanks. I hadn't thought of that. But after looking at your code, it makes sense. — John Doee, Feb 21 '19 at 01:20

score 1 · Answer 3 · answered Feb 21 '19 at 00:48

Here is some code that breaks it down and formats correctly.

Note: We have a base 'start' date to subtract, this allows us to work like a true stopwatch.

let base = Date.now(); // Milliseconds
var testVar = window.setInterval(update, 10);

const displayNum = (num) => num.toString().padStart(2,'0');

function update() {
  let mil = Date.now() - base;
  let sec = Math.floor( mil/1000 );
  mil = mil%1000;
  let min = Math.floor( sec/60 );
  sec = sec%60;
  document.getElementById("seconds").innerHTML = `${displayNum(min)}:${displayNum(sec)}:${displayNum(mil)}`;
}

#seconds {
  background-color: yellow;
  max-width: 17%;
}

<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>

</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>


</body>

How can I fix my Javascript stopwatch with the 00:00 time format? (Seconds:Milliseconds)

3 Answers3