Как сделать, чтобы при открытии сайта некое число увеличилось от 0 до его значения?

Question

У меня есть на сайте число - 2000 (выполненных заказов). Я хочу, чтобы при открытии сайта это число за пару секунд увеличилось от 0 до 2000, не сразу бы перескочило с 0 до 2000, а как бы посчиталось. Как это можно осуществить?

Answer 1

function startTimer(speed, numToRun){
  let timer = 0;
  let interval = setInterval(function(){
    document.querySelector('div').innerHTML = timer;
    timer+=10;
    if (timer > numToRun) {
      clearInterval(interval);
    }
  }, speed);
}
startTimer(1, 2000);

<div>

Answer 2

let div = document.querySelectorAll(".count");

// Взять элемент, анимировать до 2000 за 2 секунды
animate({elem: div[0], to: 2000, sec: 2});
animate({elem: div[1], to: 20000, sec: 10});
animate({elem: div[2], to: 1000000, sec: 15});

/***/
function animate({elem, from = 0, to, sec}) { // Называется "деструктуризация"
  let tick = (to - from) / (60 * sec);
  // 60 - это 60 кадров в секунду, от requestAnimationFrame
  
  loop();
  function loop() {
    elem.textContent = Math.round( from += tick );
    
    if( from >= to ) {
      // Прервать, как только дойдет до конца.
      elem.textContent = to;
      return;
    }
    
    requestAnimationFrame(loop);
  }
}

.count { font-size: 40px; color: #045acf; }

<div class="count"></div>
<div class="count"></div>
<div class="count"></div>

Оно считает только "вверх". Можно немного пошаманить и научить считать и в минус.

БЛОГ НА HUSL

Как сделать, чтобы при открытии сайта некое число увеличилось от 0 до его значения?

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