Salve , devo creare una slot machine per scuola , il problema che ho riscontrato e che quando schiaccio il bottone gioca i numeri iniziano a girare ma per poterli fermare devo schiarire un altro bottone (ferma) vorrei sapere come fare per avere solo il pulsante gioca e che là slot smetta di girare da sola.
Grazie per l'aiuto. (:
Qui di seguito vi posto il mio codice:
<!DOCTYPE HTML>
<html>
<head>
<title>SLOT MACHINE</title>
<style>
#pulsante{
display: inline-block;
text-align: center;
border-width: 1px;
line-height: 1.1;
font-weight: normal;
font-family: sans-serif;
color: black;
font-size: 12px;
background-color: #693F73;
border-radius: 24px;
}
#pulsante1{
display: inline-block;
text-align: center;
border-width: 1px;
line-height: 1.1;
font-weight: normal;
font-family: sans-serif;
color: black;
font-size: 12px;
background-color: #693F73;
border-radius: 24px;
}
button {
display:block;
width:138px;
height:33px;
margin:22px 62px;
cursor:pointer;
}
#bordo {
border-style: solid;
}
#border {
width: 750px;
adding: 11px;
margin: 320px;
}
.testo {
text-align:center;
}
.contenitore {
margin:0 auto;
width:265px;
align:left;
}
.slotmachine {
width:85px;
height:70px;
float:right;
border:1px ;
background-position:100px;
}
body {
background: url('immagine.jpg');
background-repeat: no.repeat;
background-position 0 0;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
</style>
<script>
var gira;
function run(){
var immagini = new Array();
immagini = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif'];
var loop = Math.floor(Math.random()*5);
document.images.uno.src = immagini[loop];
var immagini = new Array();
immagini = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif'];
var loop = Math.floor(Math.random()*5);
document.images.due.src = immagini[loop];
var immagini = new Array();
immagini = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif'];
var loop = Math.floor(Math.random()*5);
document.images.tre.src = immagini[loop];
gira = setTimeout('run()', 10);
}
function stop(){
clearTimeout(gira);
}
</script>
</head>
<body background="immagine.jpg">
<div class="testo" id="border">
<div class="contenitore">
<div id="bordo" class="slotmachine"><img id = "uno" src = "1.gif"></div>
<div id="bordo" class="slotmachine"><img id = "due" src = "2.gif"></div>
<div id="bordo" class="slotmachine"><img id = "tre" src = "3.gif"></div>
<div class="clear"></div>
</div>
<div><button id="pulsante" type = "buttom" onclick = "run()">GIRA</button></div>
<div><button id="pulsante1" type = "button" onclick = "stop()">STOP</button></div>
</div>
</div>
</body>
</html>
Grazie per l'aiuto. (:
Qui di seguito vi posto il mio codice:
<!DOCTYPE HTML>
<html>
<head>
<title>SLOT MACHINE</title>
<style>
#pulsante{
display: inline-block;
text-align: center;
border-width: 1px;
line-height: 1.1;
font-weight: normal;
font-family: sans-serif;
color: black;
font-size: 12px;
background-color: #693F73;
border-radius: 24px;
}
#pulsante1{
display: inline-block;
text-align: center;
border-width: 1px;
line-height: 1.1;
font-weight: normal;
font-family: sans-serif;
color: black;
font-size: 12px;
background-color: #693F73;
border-radius: 24px;
}
button {
display:block;
width:138px;
height:33px;
margin:22px 62px;
cursor:pointer;
}
#bordo {
border-style: solid;
}
#border {
width: 750px;
adding: 11px;
margin: 320px;
}
.testo {
text-align:center;
}
.contenitore {
margin:0 auto;
width:265px;
align:left;
}
.slotmachine {
width:85px;
height:70px;
float:right;
border:1px ;
background-position:100px;
}
body {
background: url('immagine.jpg');
background-repeat: no.repeat;
background-position 0 0;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
</style>
<script>
var gira;
function run(){
var immagini = new Array();
immagini = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif'];
var loop = Math.floor(Math.random()*5);
document.images.uno.src = immagini[loop];
var immagini = new Array();
immagini = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif'];
var loop = Math.floor(Math.random()*5);
document.images.due.src = immagini[loop];
var immagini = new Array();
immagini = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif'];
var loop = Math.floor(Math.random()*5);
document.images.tre.src = immagini[loop];
gira = setTimeout('run()', 10);
}
function stop(){
clearTimeout(gira);
}
</script>
</head>
<body background="immagine.jpg">
<div class="testo" id="border">
<div class="contenitore">
<div id="bordo" class="slotmachine"><img id = "uno" src = "1.gif"></div>
<div id="bordo" class="slotmachine"><img id = "due" src = "2.gif"></div>
<div id="bordo" class="slotmachine"><img id = "tre" src = "3.gif"></div>
<div class="clear"></div>
</div>
<div><button id="pulsante" type = "buttom" onclick = "run()">GIRA</button></div>
<div><button id="pulsante1" type = "button" onclick = "stop()">STOP</button></div>
</div>
</div>
</body>
</html>
Ultima modifica:
