JSFiddle - React, Tailwind, and code Playground

by werty1001

HTML

<div class="counter" data-num="800">0</div>
<div class="counter" data-num="400">0</div>
<div class="counter" data-num="666">0</div>
<div>
  <a id="start">Наведи на меня</a>
</div>

CSS

.counter {
    display: inline-block;
    width: 100px;
    padding: 10px;
    text-align: center;
    border: solid 1px #eee;
    background: #fff;
}

JavaScript

(function () {

	var start = document.getElementById('start');
      
  start.addEventListener('mouseover', function() {
    var counters = document.getElementsByClassName('counter');
    for (var i=counters.length; i--;) { interval(counters[i]); }
  }, false);
 
  function interval(el) {
    var i = 0,
    		num = el.dataset.num,
        step = 10 / num,
        interval = setInterval(function() {
          if (i <= num) el.innerHTML = i;
          else clearInterval(interval);
          i++;
        }, step);
  }

})();