1

Подскажите ,пожалуйста, как добавить нули в следующий код, код числа меньше 10?

let spendTime = document.getElementById("spendTime");
let seconds = 0;
let minutes = 0;
let hours = 0;
let timer;

function updateSeconds() {
seconds += 1;
 if (seconds > 59) {
seconds = 0;
minutes +=1
}

if (minutes >59) {
minutes = 0 ;
hours +=1;
}

spendTime.innerHTML = `${hours} : ${minutes} : ${seconds}`;
}

timer = setInterval(updateSeconds, 1000);
2
  • вообще, не принято отвечать на такие вопросы, но добавьте if(seconds < 10) seconds = '0'+seconds; и if(minutes < 10) minutes = '0'+minutes; после if(...){...} соответственно 23 ноя 2021 в 17:30
  • а, ну и, возможно, вам придется преобразовывать строчные значений секунды и минуты в число после такой манипуляции. но это уже как-нибудь попробуйте загуглить, это не сложно) хотя, можно создать отдельную переменную для вывода строчного значения, ну, в общем, это уже другая история 23 ноя 2021 в 17:37

2 ответа 2

3

Для добавления ведущих нулей, используйте метод padStart() :

let spendTime = document.getElementById("spendTime");
let seconds = 0;
let minutes = 0;
let hours = 0;
let timer;

function updateSeconds() {
  seconds += 1;
  if (seconds > 59) {
    seconds = 0;
    minutes += 1
  }

  if (minutes > 59) {
    minutes = 0;
    hours += 1;
  }

  spendTime.innerHTML = `${hours} : ${minutes.toString().padStart(2, '0')} : ${seconds.toString().padStart(2, '0')}`;
}

timer = setInterval(updateSeconds, 1000);
<div id="spendTime"></div>

6
  • 1
    Всем, спасибо! padStart крутой метод!!! 23 ноя 2021 в 18:21
  • padStart не работает в IE
    – Sanya H
    23 ноя 2021 в 18:23
  • 1
    @Лунатик: есть ещё и padEnd(), чтобы добавлять нужное количество в конец строки.
    – UModeL
    23 ноя 2021 в 18:23
  • 1
    @SanyaH: я Вам больше скажу - IE даже сам Microsoft не поддерживает уже.
    – UModeL
    23 ноя 2021 в 18:33
  • 1
    @SanyaH: двойную цену таким заказчикам ;-)
    – UModeL
    23 ноя 2021 в 18:55
2

Можете написать функцию, в которой добавлять "0", а потом возвращать обрезанный результат. А можете и так, как в примере

let spendTime = document.getElementById("spendTime");
let seconds = 0;
let minutes = 0;
let hours = 0;
let timer;

//Добавляем метод обекту Number
Number.prototype.toLeadZeroString = function (count) {
  const preZero = '0'.repeat(count-1);
  return this ? (preZero + this).slice(-count) : this
}

function updateSeconds() {
  seconds += 1;
  if (seconds > 59) {
    seconds = 0;
    minutes +=1
  }

  if (minutes >59) {
    minutes = 0 ;
    hours +=1;
  }

  spendTime.innerHTML = `${hours.toLeadZeroString(2)} : ${minutes.toLeadZeroString(2)} : ${seconds.toLeadZeroString(2)}`;
}

timer = setInterval(updateSeconds, 1000);
<div id="spendTime"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.