我正在制作老虎机游戏......我无法弄清楚让微调器获得数字，然后在旋转后它会显示为：＆＃34;你赢得了1,000,000分！＆＃34 ;。我无法弄清楚如何做到这一点。有人能帮助我吗？它只是一个随机数字微调器（js）和奖励。
<button onclick="myFunction()">Spinner
<style>
.button {
border-radius: 4px;
background-color: white ;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
</button>
<script>
function myFunction() {
var y = Math.floor((Math.random() * 15) + 1);
var x = document.createElement("INPUT"); ///Need to break this out of function...Bug
x.setAttribute("type", "text");
x.setAttribute("value", y);//random number will be y
document.body.appendChild(x);
returnRandom(y);
}
function returnRandom(r){
//window.alert(r);
var result;
switch (r)
{
case 1: var result = 'A whopping 15,000,000 points! Great job!';
break;
case 2: var result = 'Awh man.. -500,000 points.';
break;
case 3: var result = 'A win! 50,000 points.';
break;
case 4: var result = 'A good win! 1,500,000 points.';
break;
case 5: var result = 'A bad loss.. -355,555 points.';
break;
case 6: var result = 'Nothing! Not bad nor good.';
break;
case 7: var result = ' Lucky seven! 77,777,777 points!';
break;
case 8: var result = '444,444 points.';
break;
case 9: var result = 'Cry me a river! -3,333,333 points';
break;
case 10: var result = 'Oh, You won 5,000,000 points!';
break;
case 11: var result = 'Oh! Wow! 99,999,999 points!';
break;
case 12: var result = 'Meh. -150,000 points.';
break;
case 13: var result = 'You earned it, take 3,000,000 points.';
break;
case 14: var result = 'You lost. -100,000 points.';
break;
case 15: var result = 'You got Fifteen? A big win! 100,000,000 points!';
break;
}
window.alert(result);
}
</script>
答案 0 :(得分：0)
你的代码看起来有点乱。您似乎将css集成为文本正文中的样式和文本正文中的脚本。你熟悉CSS样式表和外部JavaScript文件吗？容易制作。但是现在，以下代码将起作用。看看片段。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slot Machine</title>
<style> /*style and script should go in the head section - didn't look like you had them there */
#spin { /*gave the button an id - you could have other buttons*/
border-radius: 4px;
border: none;
color: #FFFFFF; /* took out the background color - white on white? how was that going to work? you could put it back in but change the color to #000000; or something*/
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
#spinresult{width:29px; color:#000000;}
</style>
<script>
function myFunction() {
var y = Math.floor((Math.random() * 15) + 1);
var x = document.getElementById("spinresult"); ///put an input element in the body so it didn't keep creating new ones.
x.setAttribute("type", "number"); //changed text to number
x.setAttribute("value", y); //random number is y
document.body.appendChild(x);
returnRandom(y);
};
function returnRandom(r){
//window.alert(r);
var result;
switch (r)
{
case 1: var result = 'A whopping 15,000,000 points! Great job!';
break;
case 2: var result = 'Awh man.. -500,000 points.';
break;
case 3: var result = 'A win! 50,000 points.';
break;
case 4: var result = 'A good win! 1,500,000 points.';
break;
case 5: var result = 'A bad loss.. -355,555 points.';
break;
case 6: var result = 'Nothing! Not bad nor good.';
break;
case 7: var result = ' Lucky seven! 77,777,777 points!';
break;
case 8: var result = '444,444 points.';
break;
case 9: var result = 'Cry me a river! -3,333,333 points';
break;
case 10: var result = 'Oh, You won 5,000,000 points!';
break;
case 11: var result = 'Oh! Wow! 99,999,999 points!';
break;
case 12: var result = 'Meh. -150,000 points.';
break;
case 13: var result = 'You earned it, take 3,000,000 points.';
break;
case 14: var result = 'You lost. -100,000 points.';
break;
case 15: var result = 'You got Fifteen? A big win! 100,000,000 points!';
break;
}
window.alert(result);
};
</script>
</head>
<body>
<button id="spin" onclick="myFunction()">Spinner</button>
<!--<input type="number" id="spinresult">--> <!---if you unhide this and hide the other input, you'll see the number-->
<input type="number" hidden="true" id="spinresult"> <!--hid the input so you don't see the number-->
</body>
</html>
这样可以更好地分开：
function calcresult() {
var y = Math.floor((Math.random() * 15) + 1);
var x = document.getElementById("spinresult"); ///put an input element in the body so it didn't keep creating new ones.
x.setAttribute("type", "number"); //changed text to number
x.setAttribute("value", y); //random number is y
document.body.appendChild(x);
returnRandom(y);
};
function returnRandom(r){
//window.alert(r);
var result;
switch (r)
{
case 1: var result = 'A whopping 15,000,000 points! Great job!';
break;
case 2: var result = 'Awh man.. -500,000 points.';
break;
case 3: var result = 'A win! 50,000 points.';
break;
case 4: var result = 'A good win! 1,500,000 points.';
break;
case 5: var result = 'A bad loss.. -355,555 points.';
break;
case 6: var result = 'Nothing! Not bad nor good.';
break;
case 7: var result = ' Lucky seven! 77,777,777 points!';
break;
case 8: var result = '444,444 points.';
break;
case 9: var result = 'Cry me a river! -3,333,333 points';
break;
case 10: var result = 'Oh, You won 5,000,000 points!';
break;
case 11: var result = 'Oh! Wow! 99,999,999 points!';
break;
case 12: var result = 'Meh. -150,000 points.';
break;
case 13: var result = 'You earned it, take 3,000,000 points.';
break;
case 14: var result = 'You lost. -100,000 points.';
break;
case 15: var result = 'You got Fifteen? A big win! 100,000,000 points!';
break;
}
window.alert(result);
};#spin { /*gave the button an id - you could have other buttons*/
border-radius: 4px;
border: none;
color: #FFFFFF; /* took out the background color - white on white? how was that going to work? you could put it back in but change the color to #000000; or something*/
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
#spinresult{width:29px; color:#000000;}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slot Machine</title>
</head>
<body>
<button id="spin" onclick="calcresult()">Spinner</button>
<!--<input type="number" id="spinresult">--> <!---if you unhide this and hide the other input, you'll see the number-->
<input type="number" hidden="true" id="spinresult"> <!--hid the input so you don't see the number-->
</body>
</html>
您可以保存javascript（即使使用notepad-＆gt;另存为＆gt;所有文件（扩展名为js）并使用<script> </script>标签将其链接
类似的CSS。 （例如<link rel="stylesheet" type="text/css" href="file.css"/>）欢迎使用Stackoverflow！