JS | Дополнительные нули перед числом

Question

Как сделать эффект заполнения числа нулями?

Имеется число, от 0 до 999.

В зависимости от длины этого числа, необходимо вывести нули перед ним.

Если число 9, результат - 009.

Если число 27, результат - 027.

Если число 120, результат - 120.

Сами нули необходимо обернуть в тег span.

const block = document.querySelector('div');
const zeroLength = 3;

let value = 27;

function update() {
    const valueSplit = value.toString().split('').reverse();
        
    const result = [...new Array(zeroLength)].map((_, index) => {
        const number = valueSplit[valueSplit.length - 1 - index] || 0;
        const className = number === 0 ? 'zero' : null;
        return `<span class="${className}">${number}</span>`;
    });
    
    block.innerHTML = result.join('');
    
    value = (value + 1) % 300;
    
    requestAnimationFrame(update);
}

requestAnimationFrame(update);

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #272727;
    color: #fff;
    font-family: Arial;
    min-height: 100vh;
}

div {
    font-size: 100px;
    display: flex;
}

span {
    width: 75px;
    display: block;
}

span.zero {
    opacity: 0.25;
}

<div></div>

Мой код не до конца работает как мне хотелось. Не могу уловить суть логики добавления нулей перед числом. Мне кажется это делается намного проще и не так громоздко как это делаю я.

Где можно поискать уже подобные эффекты или хотя-бы подсказать название этого эффекта, нет соображений даже как этот эффект называется.

Answer 1

Если вопрос только о добавлении нулей и вы можете работать со строкой, тогда вам всего лишь нужна функция padStart():

 const zeroLength = 3;
 
 console.log('9'.padStart(zeroLength, '0'));
 console.log('27'.padStart(zeroLength, '0'));
 console.log('120'.padStart(zeroLength, '0'));

Answer 2

Альтернативой подходу с padStart, может стать следующий вариант со slice:

добавляем максимальное количество нулей в начало
берем у получившейся строки с конца нужно количество символов

('000'+value).slice(-3);

Пример:

const block = document.querySelector('div');
const zeroLength = 3;

let value = 7;
let prev = 0;

function update(time) {
  requestAnimationFrame(update);

  if (time - prev < 100) return;
  prev = time;

  block.innerHTML = ('000'+value).slice(-zeroLength).split('').map(el=>`<span class="${el == '0' ? 'zero' : 'num'}">${el}</span>`).join('');

  value = (value + 1) % 300;

}

requestAnimationFrame(update);

body {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #272727;
  color: #fff;
  font-family: Arial;
  min-height: 100vh;
}

div {
  font-size: 100px;
  display: flex;
}

span {
  width: 75px;
  display: block;
}

span.zero {
  opacity: 0.25;
}

span.num~span.zero {
  opacity: 1;
}

<div></div>

БЛОГ НА HUSL

JS | Дополнительные нули перед числом

Как сделать эффект заполнения числа нулями?

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