JavaScript Slot Machine Test
HTML
<ol class="slot-machine">
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
</ol>
<div style="clear:both">
<button id="start">Start</button>
<button id="stop1">Stop 1</button>
<button id="stop2">Stop 2</button>
</div>
CSS
body {
background: #1B325F;
}
.slot-machine li {
color: #E9F2F9;
width: 180px;
height: 300px;
float: left;
font-size: 200px;
font-family: Georgia;
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
.slot-machine li.result {
font-size: 250px;
}
.slot-machine li.run {
color: transparent;
text-shadow: #fff 0 0 20px;
}
JavaScript
var stop1 = false;
var stop2 = false;
var words = [
"cat",
"space",
"car",
"rocket",
"submarine",
"blockchain",
"machine learning",
"boring machine",
"dog",
"cow"
];
$('#start').click(function() {
stop1 = stop2 = false;
$('.slot-machine li').addClass('run');
$('.slot-machine li').removeClass('result');
var t = 0;
var run = function() {
var c = 0;
$('.slot-machine li').each(function() {
if (c < 3) {
if (!stop1) {
$(this).text(words[Math.floor(Math.random()*10)]);
}
}
else {
if (!stop2) {
$(this).text(words[Math.floor(Math.random()*10)]);
}
}
c++;
});
t++;
if (!stop1 || !stop2) {
window.setTimeout(run, 50);
}
else {
//$('.slot-machine li').removeClass('run');
}
};
window.setTimeout(run, 50);
});
$('#stop1').click(function() {
stop1 = true;
var c = 0;
$('.slot-machine li').each(function() {
if (c < 3) {
$(this).removeClass('run');
$(this).addClass('result');
}
c++;
});
});
$('#stop2').click(function() {
stop2 = true;
var c = 0;
$('.slot-machine li').each(function() {
if (c >= 3) {
$(this).removeClass('run');
$(this).addClass('result');
}
c++;
});
});