Вот функция:
document.addEventListener('load', count())
function count() {
document.querySelectorAll('.data-number').forEach((e) => {
let currentNumber = 0
let finalNumber = e.getAttribute('data-number')
finalNumber = parseInt(finalNumber)
let delay
switch (true) {
case (finalNumber < 30):
delay = 100
break
case (finalNumber < 100):
delay = 40
break
case (finalNumber < 300):
delay = 10
break
default:
delay = 50
break
}
let increment = setInterval(() => {
e.innerHTML = currentNumber
if (currentNumber < finalNumber) {
if (finalNumber > 1000) {
currentNumber += 100
} else {
currentNumber++
}
} else {
clearInterval(increment)
}
}, delay)
increment
})
}
Так же блок, в котором срабатывает скрипт, если нужно:
<div class="statistics" id="statistics">
<div class="container">
<div class="stat">
<div class="stat__item">
<div class="data-number" data-number="84">84</div>
<div class="stat__text">Дизайнерских проекта</div>
</div>
<div class="stat__item">
<div class="data-number" data-number="246">246</div>
<div class="stat__text">Довольных клиентов</div>
</div>
<div class="stat__item">
<div class="data-number" data-number="15">15</div>
<div class="stat__text">Побед в номинаций</div>
</div>
<div class="stat__item">
<div class="data-number" data-number="99">99</div>
<div class="stat__text">Чашек коффе</div>
</div>
<div class="stat__item">
<div class="data-number" data-number="24">24</div>
<div class="stat__text">Сотрудника</div>
</div>
</div>
</div>
</div>