JavaScript Секундомер - проблема с отображением лидирующей цифры

Question

Я пытался создать простой скрипт секундомера с использованием JavaScript, чтобы отобразить количество прошедших секунд, минут и часов.

В идеале, я бы хотел, чтобы время отображалось следующим образом:

hh:mm:ss

С помощью JavaScript мне не удалось найти встроенный способ форматирования чисел так, чтобы они содержали начальный ноль, если число имеет длину только одну цифру. Вот в чем заключается моя проблема - логика, которую я добавил в скрипт для добавления начального «0», работает для дисплея seconds, но не для дисплеев minutes или hours.

Вместо того, чтобы только добавлять начальное «0» и затем однозначное значение, код, который я написал, будет добавлять «0» для каждой итерации функции setInterval(), создавая длинный строка «0», а затем текущие значения minutes или hours.

У меня возникают проблемы с пониманием того, почему это происходит для секций minutes и hours, но не для секции seconds, когда используемый код совпадает.

Теоретически я знаю, что я просто добавляю еще один «0» к строке, которая затем отображается каждый раз при выполнении функции setInterval(), но я не могу понять, почему этого не происходит в разделе seconds. И что также интересно, так это то, что начальные «0» не начнут добавляться, пока таймер не достигнет двух секунд.

Пожалуйста, смотрите ниже код, который я написал для этого скрипта секундомера. Я, безусловно, был бы признателен за любые идеи, которые кто-либо мог бы предоставить, чтобы все заработало должным образом.

let seconds = 0;
let minutes = 0;
let hours = 0;

function stopWatch(){

//Increment seconds on each "tick" of the stopwatch
seconds++;

//Check if minutes or hours needs to be incremented (which should happen every 60 seconds or 60 minutes, resepctively)
if(seconds / 60 == 0){
	seconds = 0;
	minutes++;

	if(minutes / 60 == 0){
		minutes = 0;
		hours++;
	}

}

//If the number of elapsed seconds, minutes, or hours is less than 10, add a 0 to the front of the number.
if(seconds < 10){
	seconds = "0" + seconds;
}

if(minutes < 10){
	minutes = "0" + minutes;
}

if(hours < 10){
	hours = "0" + hours;
}

//Print the results to the "display" div in the HTML
document.getElementById("display").innerHTML = hours + ":" + minutes + ":" + seconds;

}

//Run the stopWatch() function every 1000ms
window.setInterval(stopWatch, 1000);

	<div id="display">00:00:00</div>

И для того, чтобы это стоило, я сохранил теги <script></script> в документе HTML для простоты, но как только я его заработаю, я, скорее всего, перенесу сценарий в свой собственный файл script.js и, возможно, добавлю некоторые кнопки запустить, остановить и сбросить секундомер.

Answer 1

let seconds = 0;
let minutes = 0;
let hours = 0;
let seconds_string = "0";
let minutes_string = "0";
let hours_string = "0";

function stopWatch(){

//Increment seconds on each "tick" of the stopwatch
seconds++;

//Check if minutes or hours needs to be incremented (which should happen every 60 seconds or 60 minutes, resepctively)
if(seconds / 60 === 1){
	seconds = 0;
	minutes++;

	if(minutes / 60 === 1){
		minutes = 0;
		hours++;
	}

}

//If the number of elapsed seconds, minutes, or hours is less than 10, add a 0 to the front of the number.
if(seconds < 10){
	seconds_string = "0" + seconds.toString();
} else {
    seconds_string = seconds.toString();
}

if(minutes < 10){
	minutes_string = "0" + minutes.toString();
} else {
    minutes_string = minutes.toString();
}

if(hours < 10){
	hours_string = "0" + hours.toString();
} else {
    hours_string = hours.toString();
}

//Print the results to the "display" div in the HTML
document.getElementById("display").innerHTML = hours_string + ":" + minutes_string + ":" + seconds_string;

}

//Run the stopWatch() function every 1000ms
window.setInterval(stopWatch, 1000);

	<div id="display">00:00:00</div>

Answer 2

Вместо проверки в if, если значение меньше 10, проверьте длину этого значения в виде строки, если оно меньше 2 (что в данном случае означает любое число меньше 10), тогда вы добавьте еще "0" в качестве строки к значению;

Как показано ниже:

let seconds = 0;
let minutes = 0;
let hours = 0;

function stopWatch(){
  seconds++;
  
  if(seconds / 60 == 0){
    seconds = 0;
    minutes++;
    if(minutes / 60 == 0){
      minutes = 0;
      hours++;
    }
  }

  if(seconds.toString().length < 2){
    seconds = "0" + seconds;
  }
  
  if(minutes.toString().length < 2){
    minutes = "0" + minutes;
  }

  if(hours.toString().length < 2){
    hours = "0" + hours;
  }
  document.getElementById("display").innerHTML = hours + ":" + minutes + ":" + seconds;
}

window.setInterval(stopWatch, 1000);

<div id="display">00:00:00</div>

Answer 3

Когда вы делаете «0» + минуты (и секунды, и часы), эти переменные автоматически преобразуются в строку, состоящую из двух символов, нуля и чего-то еще.

Поскольку переменные проходят через каждую итерацию, в следующий раз вы добавите еще один символ «0» в начало строки и так далее.

Причина, по которой этого не происходит в секундах, заключается в том, что вы конвертируете секунды НАЗАД в int в начале цикла, когда выполняете секунды ++. Таким образом, он становится строкой, затем int, затем строкой и т. Д.

Чтобы увидеть это в действии, попробуйте этот фрагмент:

var test = 1;
console.log( typeof test );  //outputs "number"
test = "0" + test;
console.log( typeof test ); //outputs "string"
test++;
console.log( typeof test); //outputs number

Мое предложение состояло бы в том, чтобы отделить счетные единицы от единиц отображения. Посмотрите, если минут меньше 10, и если так, установите outputMinutes на "0" + минут. Сделайте то же самое для секунд и часов. Затем вы просто каждый раз изменяете outputMinutes, outputSeconds и outputHours, а фактические переменные минут, секунд и часов остаются целыми числами.