Как сделать отсчёт от 0 и дальше?

Question

[Роман Тузов]

выше приведён скриншот как выглядит таймер. Каждая цифра - это стилизованный span. Нужно сделать так, чтобы шёл отсчёт от 0 и до бесконечности с промежутком в какое-то число секунд(потом сам поставлю).
В общем, я придумал как сделать отсчёт от 0 до бесконечности, но не придумал как сделать так, чтобы при достижении цифры 9, в этом span становилось 0, а в span слева писало 1,2,3.. Ну в общем понятно, что я хочу, чтобы каждая цифра стилизовалась как на скрине. Ну и не придумал как сделать сброс в 00:00 часов)
Я думаю, это простой вопрос для знатоков и надеюсь, что вы мне поможете в этом деле. Заранее большое спасибо!

Comments

[v3shin]

По аналогии с https://codepen.io/kindofone/pen/DkhAz: тут даже js не нужен.

Answer 1

[0xD34F]

Выводится фиксированное количество разрядов числа, вместо отсутствующих подставляются нули:

function output(value) {
  const digits = document.querySelectorAll('селектор span`ов');
  const { length } = digits;

  Array
    .from(`${value}`.padStart(length, 0).slice(-length))
    .forEach((n, i) => digits[i].innerText = n);
}

Число выводится как оно есть, количество span'ов не фиксировано:

function output(value) {
  document.querySelector('селектор родительского элемента span`ов').innerHTML = Array
    .from(`${value}`, n => `<span>${n}</span>`)
    .join('');
}

Comments

[Роман Тузов]

а что должно происходить? Я написал класс span в поле под селектор и ничего не изменилось

[0xD34F]

Роман Тузов, когда хотите вывести значение счётчика - передаёте его в эту функцию.

[Роман Тузов]

0xD34F, не совсем понял)

[0xD34F]

Роман Тузов, вероятно, вы ошиблись ресурсом. Попробуйте обратиться сюда.

[Сергей delphinpro]

Роман Тузов,

let i=0;
setInterval(function(){
  output(++i);
}, 1000)

[Роман Тузов]

0xD34F, не, это вы ошиблись. Там берут услуги, а здесь узнают как сделать эту услугу

[Роман Тузов]

Сергей delphinpro, это обычное увеличение, такое я делал(писал в вопросе)

[0xD34F]

Роман Тузов, вот и узнали - код в ответе. Непонятно? Ну так подумать попробуйте. Не надо ждать, что кто-то вам тут бесплатно в учителя наймётся, и станет разжёвывать вопросы уровня "2*2=?".

[Максим]

0xD34F, я хотел спросить вот это

{ length } = document.querySelectorAll

и

[...document.querySelectorAll]

получим одно и тоже ? Array.length ?

[0xD34F]

[ смотрит удивлённо ]

Максим Ленский, а выполнить код и посмотреть результат самостоятельно - нет?

В первом случае будет получено количество элементов. Во втором - сами элементы, но в уже виде массива, а не NodeList.

[Максим]

0xD34F, у меня в обоих слeчаях length возвращается ...я по этому переспросил

[Максим]

0xD34F, извени - это я сдебильничал - не то вывел