JSFiddle - React, Tailwind, and code Playground
HTML
<div id="num">1234</div>
<input type="submit" id="spin" value="Spin it, baby!" />
JavaScript
(function($) {
$.fn.animateNumbers = function(stop, commas, duration, ease) {
return this.each(function() {
var $this = $(this);
var start = parseInt($this.text().replace(/,/g, ""));
commas = (commas === undefined) ? true : commas;
$({value: start}).animate({value: stop}, {
duration: duration == undefined ? 1000 : duration,
easing: ease == undefined ? "swing" : ease,
step: function() {
$this.text(Math.floor(this.value));
if (commas) { $this.text($this.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")); }
},
complete: function() {
if (parseInt($this.text()) !== stop) {
$this.text(stop);
if (commas) { $this.text($this.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")); }
}
}
});
});
};
})(jQuery);
$( '#spin' ).on( 'click', function( event )
{
$( '#num' ).animateNumbers( Math.round( Math.random() * 10000 ) );
} );