Как сделать счетчик статистики в html с js

Question

Задумка такая есть блок с статистикой типа наши достижения. В блоке 10 лет на рынке 985 успешных проектов и тд. Хочу сделать так чтобы когда сайт открылся в этом блоке 985 набрался с 0, как progress bar.

<div class="main-section-stats d-flex justify-content-center">
  <div>
    <h1 class="main-section-stats-title mb-0 text-center">8</h1>
    <p class="main-section-stats-text mb-0">Сотрудников</p>
  </div>
  <div>
    <h1 class="main-section-stats-title mb-0"><span class="slash">|</span>&nbsp&nbsp10&nbsp&nbsp<span class="slash">|</span></h1>
    <p class="main-section-stats-text text-center mb-0">Лет опыта </p>
  </div>
  <div>
    <h1 class="main-section-stats-title mb-0 text-center"><span class="slash"></span>8<span class="slash"></span></h1>
    <p class="main-section-stats-text mb-0">Каналов</p>
  </div>
</div>

Answer 1

Для реализации нарастающего счетчика, можно воспользоваться функцией setTimeout

При помощи setTimeout будем последовательно запускать код, который будет увеличивать нужное нам число и выводить в заданный HTML тег

document.getElementById('start').addEventListener('click', () => {
  counter.innerText = '0';
  showNumber = 0;
  sleep = 200;
  increment = 100;
  printNumber();
});
// Выбираем тег, где будем показывать число
const counter = document.getElementById('counter');
// Финальная цифра
const finalNumber = 985;
// Старт
let showNumber = 0;
// Начальный период обновления в мс 
let sleep = 200;
// На сколько увеличиваем число
let increment = 100;

function printNumber() {
  showNumber += increment; // Добавляем число
  // тут замедляем счетчик(для красоты)
  if (showNumber >= 980) {
    sleep += 50;
    increment = 1;
  } else if (showNumber >= 900) {
    sleep += 40;
    increment = 10;
  }
  // Запускаем таймер
  setTimeout(() => {
    counter.innerText = showNumber;
    if (showNumber !== finalNumber) {
      printNumber();
    }
  }, sleep);
}

// Для запуска без нажатия кнопки
// printNumber();

<div id="counter">0</div>
<button id="start">Начать</button>

Код выше имеет настройки по скорости отрисовки и интервалов увеличения чисел.

БЛОГ НА HUSL

Как сделать счетчик статистики в html с js

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