+ 14
The problem occurs due to the inconsistencies of number display and it's most obvious for the milliseconds part as it can range from 0 to 999. (3 digits)
Therefore you may fix it by applying padding to the number display like this:-
mil.toString().padStart(3, 0) // 3 digits
so it will display as 000~999.
P/S: You may do the same for other parts as well. đ
+ 2
You could use the way you've tried, by correcting, continuing and moving this:
if (sec.length <= 9) {
sec = "0" + sec;
};
... you should only compare variable value, as they are Numbers (there's no length property on Numbers objects), and do the change before using them in assignation of innerHTML property, as well as done equivalent for 'min', 'hours' and 'mil':
if (sec <= 9) {
sec = "0" + sec;
};
if (min <= 9) {
min = "0" + min;
};
if (hours <= 9) {
hours = "0" + hours;
};
if (mil <= 9) {
mil = "00" + mil};
} else if (mil <= 99) {
mil = "0" + mil};
};
That's for your way... However, @Zephir Koo answer suggest a shortest written way ;)