JSFiddle - React, Tailwind, and code Playground
HTML
<span id="superCounter"></span>
CSS
#superCounter{
bottom:50%;
position:absolute;
display:block;
width:100%;
text-align:center;
font-size:50px;
font-family:arial;
color:#333033;
}
JavaScript
var count = 587165;
var text = "";
$('#superCounter').html(count);
setTimeout(incrementCount, 1);
setTimeout(displayCount, 1000);
function incrementCount(){
var r = getRandomInt(0, 300);
if(r === 1) { text = "shit"; setTimeout(incrementCount, 1000); } else if(r === 2) { text = "uuuhhh...."; setTimeout(incrementCount, 1000); } else if(r === 3) { text = "dammit"; setTimeout(incrementCount, 1000); } else if(r === 4) { text = "heaps"; setTimeout(incrementCount, 1000); } else if(r === 5) { text = "lots"; setTimeout(incrementCount, 1000); } else{ count+= r; text = count.toString(); setTimeout(incrementCount, 100); }
}
function displayCount(){
$('#superCounter').html(text);
setTimeout(displayCount, 1000);
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}