2015-12-13 166 views
-1

我對JavaScript很陌生,我正在創建一個骰子游戲。我想創建一個骰子隨機出現的Javascript函數,並且我想在每次點擊按鈕時隨機地改變骰子。 這是JavaScript和HTML代碼:隨機骰子滾動

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Lancio del dado</title> 
 
<script type="text/javascript"> 
 
var numero_dado = 1; 
 
var tempo =1000; 
 
setTimeout(function(){lancio_dado(); }, tempo); 
 
</script> 
 
<style> 
 
table{ 
 
*border-collapse: collapse; /* IE7 and lower */ 
 
    border-spacing: 0; 
 
\t background:#ffffff !important; /* For IE*/ 
 
} 
 
.bordered { 
 
    border: solid #ccc 10px; 
 
\t -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
\t behavior: url(border-radius.htc); 
 
    -webkit-box-shadow: 0 1px 1px #ccc; 
 
    -moz-box-shadow: 0 1px 1px #ccc; 
 
    box-shadow: 0 1px 1px #ccc;   
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<script type="text/javascript"> 
 

 
function lancio_dado(){ 
 
\t if(numero_dado == 1){ 
 
\t \t document.getElementById('primacella').innerHTML = ""; 
 
\t \t document.getElementById('secondacella').innerHTML = ""; 
 
\t \t document.getElementById('terzacella').innerHTML = ""; 
 
\t \t document.getElementById('quartacella').innerHTML = ""; 
 
\t \t document.getElementById('quintacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('sestacella').innerHTML = ""; 
 
\t \t document.getElementById('settimacella').innerHTML = ""; 
 
\t \t document.getElementById('ottavacella').innerHTML = ""; 
 
\t \t document.getElementById('nonacella').innerHTML = ""; 
 
\t \t numero_dado = 2; 
 
\t \t setTimeout(function(){lancio_dado(); }, tempo); 
 
\t \t breake(); 
 
\t } 
 
\t if(numero_dado == 2){ 
 
\t \t document.getElementById('primacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('secondacella').innerHTML = ""; 
 
\t \t document.getElementById('terzacella').innerHTML = ""; 
 
\t \t document.getElementById('quartacella').innerHTML = ""; 
 
\t \t document.getElementById('quintacella').innerHTML = ""; 
 
\t \t document.getElementById('sestacella').innerHTML = ""; 
 
\t \t document.getElementById('settimacella').innerHTML = ""; 
 
\t \t document.getElementById('ottavacella').innerHTML = ""; 
 
\t \t document.getElementById('nonacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t numero_dado = 3; 
 
\t \t setTimeout(function(){lancio_dado(); }, tempo); 
 
\t \t breake(); 
 
\t } 
 
\t if(numero_dado == 3){ 
 
\t \t document.getElementById('primacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('secondacella').innerHTML = ""; 
 
\t \t document.getElementById('terzacella').innerHTML = ""; 
 
\t \t document.getElementById('quartacella').innerHTML = ""; 
 
\t \t document.getElementById('quintacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('sestacella').innerHTML = ""; 
 
\t \t document.getElementById('settimacella').innerHTML = ""; 
 
\t \t document.getElementById('ottavacella').innerHTML = ""; 
 
\t \t document.getElementById('nonacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t numero_dado = 4; 
 
\t \t setTimeout(function(){lancio_dado(); }, tempo); 
 
\t \t breake(); 
 
\t } 
 
\t if(numero_dado == 4){ 
 
\t \t document.getElementById('primacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('secondacella').innerHTML = ""; 
 
\t \t document.getElementById('terzacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('quartacella').innerHTML = ""; 
 
\t \t document.getElementById('quintacella').innerHTML = ""; 
 
\t \t document.getElementById('sestacella').innerHTML = ""; 
 
\t \t document.getElementById('settimacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('ottavacella').innerHTML = ""; 
 
\t \t document.getElementById('nonacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t numero_dado = 5; 
 
\t \t setTimeout(function(){lancio_dado(); }, tempo); 
 
\t \t breake(); 
 
\t } 
 
\t if(numero_dado == 5){ 
 
\t \t document.getElementById('primacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('secondacella').innerHTML = ""; 
 
\t \t document.getElementById('terzacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('quartacella').innerHTML = ""; 
 
\t \t document.getElementById('quintacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('sestacella').innerHTML = ""; 
 
\t \t document.getElementById('settimacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('ottavacella').innerHTML = ""; 
 
\t \t document.getElementById('nonacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t numero_dado = 6; 
 
\t \t setTimeout(function(){lancio_dado(); }, tempo); 
 
\t \t breake(); 
 
\t \t 
 
\t } 
 
\t if(numero_dado == 6){ 
 
\t \t document.getElementById('primacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('secondacella').innerHTML = ""; 
 
\t \t document.getElementById('terzacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('quartacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('quintacella').innerHTML = ""; 
 
\t \t document.getElementById('sestacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('settimacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t document.getElementById('ottavacella').innerHTML = ""; 
 
\t \t document.getElementById('nonacella').innerHTML = "<img src='./img/punto.jpg' width='50' height='50'>"; 
 
\t \t numero_dado = 1; 
 
\t \t setTimeout(function(){lancio_dado(); }, tempo); 
 
\t \t breake(); 
 
\t \t 
 
\t } 
 
} 
 
</script> 
 
</script> 
 
<button onclick="throwdice">Lancia il dado</button> 
 
<center> 
 
<table class= "bordered" width ="300" height="300"> 
 
\t <tr> 
 
\t \t <td align="center" valign="middle" width="100" height="100"><span id="primacella"></span></td> 
 
\t \t <td align="center" valign="middle" width="100" height="100"><span id="secondacella"></span></td> 
 
\t \t <td align="center" valign="middle" width="100" height="100"><span id="terzacella"></span></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td align="center" valign="middle" width="100" height="100"><span id="quartacella"></span></td> 
 
\t \t <td align="center" valign="middle" width="100" height="100"><span id="quintacella"></span></td> 
 
\t \t <td align="center" valign="middle" width="100" height="100"><span id="sestacella"></span></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td align="center" valign="middle" width="100" height="100"><span id="settimacella"></span></td> 
 
\t \t <td align="center" valign="middle" width="100" height="100"><span id="ottavacella"></span></td> 
 
\t \t <td align="center" valign="middle" width="100" height="100"><span id="nonacella"></span></td> 
 
\t </tr> 
 
</table> 
 
</center> 
 
</body> 
 
</html>

+3

好的,太棒了,那你現在有什麼問題? –

回答

1

我認爲你正在尋找這樣的:

numero_dado = Math.floor((Math.random() * 6) + 1); 

本聲明範圍內[1生成隨機數, 6]並將其分配給numero_dado。