Счетчик времени JS как добавить нули, когда цифры меньше десяти?

Question

Подскажите ,пожалуйста, как добавить нули в следующий код, код числа меньше 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);

Answer 1

Можете написать функцию, в которой добавлять "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>

Answer 2

Для добавления ведущих нулей, используйте метод 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>

БЛОГ НА HUSL

Счетчик времени JS как добавить нули, когда цифры меньше десяти?

Ответы (2 шт):