JSFiddle - React, Tailwind, and code Playground

by rity

HTML

<div id="output">--</div>

CSS

#output {
    margin: 20px;
    padding: 20px;
    background: gray;
    border-radius: 10px;
    font-size: 80px;
    width: 250px;
    color: white;
}

JavaScript

var output, started, duration, desired;

// Constants
duration = 1000;
desired = '50';
var data = ['023546','023356', '023786', '923546', '089896'];

// Initial setup
output = $('#output');
started = new Date().getTime();

// Animate!
animationTimer = setInterval(function() {
    // If the value is what we want, stop animating
    // or if the duration has been exceeded, stop animating
    if (output.text().trim() === desired || new Date().getTime() - started > duration) {
        clearInterval(animationTimer);
    } else {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text(''+data[Math.floor(Math.random() * 5)]);
    }
}, 20);