JSFiddle - React, Tailwind, and code Playground
HTML
<span id="foo">123</span>
<br/>
<a href="#" id="go">Go!</a>
CSS
#foo { font-size: 24px; font-weight: bold; font-family: monospace; }
JavaScript
var changeto = 456;
function slotmachine(id) {
var thisid = '#' + id;
var $obj = $(thisid);
$obj.css('opacity', '.3');
var original = $obj.text();
var spin = function() {
return Math.floor(Math.random() * 10);
};
var spinning = setInterval(function() {
$obj.text(function() {
var result = '';
for (var i = 0; i < original.length; i++) {
result += spin().toString();
}
return result;
});
}, 10);
var done = setTimeout(function() {
clearInterval(spinning);
$obj.text(changeto).css('opacity', '1');
}, 10000);
}
$('#go').click(function() {
slotmachine('foo');
});