JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="counter"></div>

CSS

#counter {
  background: #303F9F;
  color: #fff;
  font-size: 60px;
  font-weight: 600;
  width: 200px;
  padding:20px 20px 40px;
  text-align: center;
  text-shadow: 3px 3px 3px #1A237E;
  position: relative;
}
#counter::after {
  bottom: 10px;
  content: 'Денег потрачено';
  display: block;
  font-size: 24px;
  left: 0;
  position: absolute;
  text-align: center;
  text-shadow: none;
  width: 100%;
  height: 30px;
}

JavaScript

$(document).ready(function () {
var value = genNewValue();
animate(0, value);
});

function animate (startValue, value) {
console.log(startValue)
console.log(value)
  $('#counter').prop('Counter', startValue).animate({
    Counter: value
  }, {
    duration: 5000,
    easing: 'swing',
    step: function (now) {
      $(this).text(Math.ceil(now));
    },
    complete: function () {
      startValue = value;
      value += genNewValue();
      setTimeout( function() {
      animate(startValue, value);
      }, 2000)
      
    }
  });
}

function genNewValue () {
  var v = Math.random() * 100;
  return Math.round(v);
}