1.output {
2 margin: 20px;
3 padding: 20px;
4 background: gray;
5 border-radius: 10px;
6 font-size: 80px;
7 width: 80px;
8 color: white;
9 float: left;
10}
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
3<div class="output" id="output0">--</div>
4<div class="output" id="output1">--</div>
5<div class="output" id="output2">--</div>
1var numbers = [12, 54, 32, 45, 21, 69, 20];
2function generateNumber(index) {
3 var desired = numbers[index];
4 var duration = 2000;
5
6 var output = $('#output' + index); // Start ID with letter
7 var started = new Date().getTime();
8
9 animationTimer = setInterval(function() {
10 if (output.text().trim() === desired || new Date().getTime() - started > duration) {
11 clearInterval(animationTimer); // Stop the loop
12 output.text(desired); // Print desired number in case it stopped at a different one due to duration expiration
13 generateNumber(index + 1);
14 } else {
15 output.text(
16 '' +
17 Math.floor(Math.random() * 10) +
18 Math.floor(Math.random() * 10)
19 );
20 }
21 }, 100);
22}
23
24generateNumber(0);