Stopwatch doesn't add zero when there is a one-digit number

Question

I would like to make the time display that time 01: 02: 03:43, but I get 0:0:00000000000000001:15 I tired add 0 in dev **0:0:0:0, but it doesn't work. Is it good code for timer?

var hour = 0;
var min = 0;
var sec = 0;
var miliSec = 0;
var timer;

function callTimer() {
  miliSec++;
  if (miliSec < 100) {
    if (miliSec === 99) {
      miliSec = 0;
      sec++;
      if (sec === 60) {
        sec = 0;
        min++;
        if (min === 60) {
          min = 0;
          hour++
        }
      }
    }
  } else {
    miliSec = 0;
  }

  document.getElementById("#timer").innerHTML = hour + ":" + min + ":" + sec + ":" + miliSec;
}


function start() {
  document.getElementById("#start").disabled = true;
  timer = setInterval(callTimer, 10);
}

function stop() {
  document.getElementById("#start").disabled = false;
  clearInterval(timer);
}

function reset() {
  stop();
  hour = 0;
  min = 0;
  sec = 0;
  miliSec = 0;
  document.getElementById("#timer").innerHTML = hour + ":" + min + ":" + sec + ":" + miliSec;
}

I have to give more details about this problem, because validation don't allow post me that problem. Well I wrote this ;)

Does this answer your question? https://stackoverflow.com/questions/8043026/how-to-format-numbers-by-prepending-0-to-single-digit-numbers — Matt Oestreich, Dec 27 '19 at 20:28
Does this answer your question? [How to format numbers by prepending 0 to single-digit numbers?](https://stackoverflow.com/questions/8043026/how-to-format-numbers-by-prepending-0-to-single-digit-numbers) — nvioli, Dec 27 '19 at 20:31
You appear to have code (that is commented out) that zero-pads the `sec` variable. Not sure why that's commented out or why it wasn't done with the remaining variables. — Heretic Monkey, Dec 27 '19 at 21:08

BonzoFestoon · Accepted Answer · 2019-12-30T14:21:32.823

I added toString().padStart(2, "0") to each element.

You can read more about padStart() here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

var hour = 0;
var min = 0;
var sec = 0;
var miliSec = 0;
var timer;

function callTimer() {
  miliSec++;
  if (miliSec < 100) {
    if (miliSec === 99) {
      miliSec = 0;
      sec++;
      if (sec === 60) {
        sec = 0;
        min++;
        if (min === 60) {
          min = 0;
          hour++
        }
      }
    }
  } else {
    miliSec = 0;
  }
  /* Add 0 every time -- This does not work because it changes the type from a number to string, causing the unexpected behavior
  if (sec < 10) {
      sec = "0" + sec;
  }else{
      sec;
  }
  */
  document.getElementById("#timer").innerHTML = hour.toString().padStart(2, "0") + ":" + min.toString().padStart(2, "0") + ":" + sec.toString().padStart(2, "0") + ":" + miliSec;
}


function start() {
  document.getElementById("#start").disabled = true;
  clearInterval(timer);//stop any previous interval before starting another
  timer = setInterval(callTimer, 10);
}

function stop() {
  document.getElementById("#start").disabled = false;
  clearInterval(timer);
}

function reset() {
  stop();
  hour = 0;
  min = 0;
  sec = 0;
  miliSec = 0;
  document.getElementById("#timer").innerHTML = hour.toString().padStart(2, "0") + ":" + min.toString().padStart(2, "0") + ":" + sec.toString().padStart(2, "0") + ":" + miliSec;
}

<nav class="controls">
  <a href="#" class="button" id="#start" onclick="start();">START</a>
  <a href="#" class="button" id="#stop" onclick="stop();">STOP</a>
  <a href="#" class="button" id="#clear" onclick="reset();">CLEAR</a>
</nav>
<div id="#timer">00:00:00:0</div>

score 1 · Answer 2 · answered Dec 27 '19 at 21:05

Instead of keeping four counters, you could very easily get the delta in milliseconds on every run of the callTimer callback and then do a few simple calculations to get seconds, hours, weeks... whatever the time units you may need. Something along these lines should do the trick:

var startTS

function formatNumber(num, digits) {
  return `000${num}`.slice(-digits)  // Get last X digits (in our case will be either 2 or 3)
}

function callTimer() {
  const currentTS = Date.now()
  const elapsed = currentTS - startTS   // Elapsed time in milliseconds
  const elapsedSec = Math.floor(elapsed/1000)   // Whole seconds
  const elapsedMin = Math.floor(elapsedSec/60)  // Whole minutes
  const elapsedHr  = Math.floor(elapsedMin/60)  // Whole hours

  ...

  const msec = elapsed % 1000  // Get the "milliseconds" part
  const sec = elapsedSec % 60  // Seconds part
  const min = elapsedMin % 60  // Minutes
  const hr = elapsedHr % 60    // Hours

  const fmtStr = `${formatHumber(hr,2)}:${formatNumber(min,2)}:${formatNumber(sec,2)}.${formatNumber(msec,3)}`
  document.getElementById("#timer").innerHTML = fmtStr
}

...

function start() {
  document.getElementById("#start").disabled = true;
  startTS = Date.now()
  timer = setInterval(callTimer, 10);
}

...

Hope that helps!

Stopwatch doesn't add zero when there is a one-digit number

2 Answers2