JSFiddle - React, Tailwind, and code Playground
HTML
<div id="a"></div>
<a href="javascript:start();">start</a>
JavaScript
var a = 40000;
var b = 45000;
document.getElementById("a").innerHTML = commaSeparateNumber(a);
function animate(opts) {
var start = new Date;
var id = setInterval(function () {
var timePassed = new Date - start
var progress = timePassed / opts.duration
if (progress > 1) progress = 1
var delta = progress;
opts.step(delta)
if (progress == 1) {
clearInterval(id)
}
}, opts.delay || 10)
}
function commaSeparateNumber(val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
start = function () {
animate({
delay: 10,
duration: 3000,
step: function (progress) {
var difference = b - a;
document.getElementById("a").innerHTML = commaSeparateNumber(a + Math.round(progress * difference));
}
});
}