Шаг - это перебор чисел от 0 до необходимого числа.
Пример нужно просчитать итоговое число 10 с шагом 1.
То числа от 0 до 10 с шагом 1 будут считаться по счетчику следуюшим образом 0, 1, 2, 3, 4, 5 ,6 ,7, 8, 9 ,10
Либо же к примеру нужно просчитать итоговое число 10 с шагом 1
То числа от 0 до 10 с шагом 2 будут считаться по счетчику следуюшим образом 0, 2, 4, 6, 8, ,10
Либо же пускай шаг чисел для всех будет одинаковым, но 4 разных числа должны закончится одновременно в одно и тоже время.
Что-то вроде этого:
function digitsCounter() {
// Обнуление
if (document.querySelectorAll("[data-digits-counter]").length) {
document.querySelectorAll("[data-digits-counter]").forEach((element) => {
element.dataset.digitsCounter = element.innerHTML;
element.innerHTML = `0`;
});
}
// Функция инициализации
function digitsCountersInit(digitsCountersItems) {
let digitsCounters = digitsCountersItems
? digitsCountersItems
: document.querySelectorAll("[data-digits-counter]");
if (digitsCounters.length) {
digitsCounters.forEach((digitsCounter) => {
digitsCountersAnimate(digitsCounter);
});
}
}
// Анимация
function digitsCountersAnimate(digitsCounter) {
let startTimestamp = null;
const duration = parseInt(digitsCounter.dataset.digitsCounterSpeed)
? parseInt(digitsCounter.dataset.digitsCounterSpeed)
: 1000;
const startValue = parseInt(digitsCounter.dataset.digitsCounter);
const startPosition = 0;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
digitsCounter.innerHTML = Math.floor(progress * (startPosition + startValue));
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
//Вызов инициализации без действия
digitsCountersInit();
}
digitsCounter();