这段代码的目的是创建一个网页,当单击一个按钮时,该网页将掷骰子。提示用户输入掷骰子的次数。这些面包卷将被扔掉(烧掉),我将仅使用最后一卷。凝视骰子应更改为最后一卷中掷出的两个骰子。
滚动数应在1到100之间。输入的任何无效值都应提醒用户该问题,通知他们您正在更改它,并将其条目更改为50。
应该有一行显示最后一卷的总数。在网页的初始运行中,滚动行应为0,但在所有滚动之后,它应仅显示最后一个滚动的总数。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dice Roller</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="icon" type="image/png" href="images/icon.png" />
<script type="text/javascript">
function diceRoll()
{
var dice1Num = parseInt((Math.random() * 6) + 1); //create a random integer between 1 and 6
var dice2Num = parseInt((Math.random() * 6) + 1);
var numberRolls = document.rollNum.numRolls.value;
if (numberRolls > 100 || numberRolls < 1)
{
numberRolls == 50;
alert("The number of rolls entered is invalid. The number of rolls as been set to 50.");
}
for (var rollCount = 0; rollCount < numRolls; rollcount++;)
{
var diceSum = 0;
diceSum = dice1Num + dice2Num;
}
var d1Image = document.getElementById("dice1Start"); //this attaches the image to the div, dice1.
if (dice1Num == 1)
{
d1Image.src = "images/one.png" //defines the path for the attached images if the condtion is met (same for all similar lines, just different paths). This was also learned from stack overflow
}
else if (dice1Num == 2)
{
d1Image.src = "images/two.png"
}
else if (dice1Num == 3)
{
d1Image.src = "images/three.png"
}
else if (dice1Num == 4)
{
d1Image.src = "images/four.png"
}
else if (dice1Num == 5)
{
d1Image.src = "images/five.png"
}
else if (dice1Num == 6)
{
d1Image.src = "images/six.png"
}
var d2Image = document.getElementById("dice2Start"); //this attaches the image to the div, dice2
if (dice2Num == 1)
{
d2Image.src = "images/one.png"
}
else if (dice2Num == 2)
{
d2Image.src = "images/two.png"
}
else if (dice2Num == 3)
{
d2Image.src = "images/three.png"
}
else if (dice2Num == 4)
{
d2Image.src = "images/four.png"
}
else if (dice2Num == 5)
{
d2Image.src = "images/five.png"
}
else if (dice2Num == 6)
{
d2Image.src = "images/six.png"
}
alert(diceSum);
}
</script>
</head>
<body>
</p1>
<h1>Click the button to roll two dice!</h1>
<img id="dice1Start" src="images/pre-roll.png" alt="Dice with question marks.">
<img id="dice2Start" src="images/pre-roll.png" alt="Dice with question marks.">
<form name="rollNum">
<p>How many rolls to burn? <input type="number" name="numRolls"></p>
<p><input type="button" value="Roll!" name="btnSubmit" onClick="diceRoll()"></p>
</form>
<p>Last Roll = </p>
</body>
</html>
这是此代码创建的站点。
http://studentweb.cdm.depaul.edu/~fkreutze/assignment-6/assignment-6.html?numRolls=15
当我按下按钮调用该函数时,没有任何反应,因为起始骰子不会更改为滚动的骰子。我已经坚持了一段时间,因此欢迎您提供任何帮助或建设性的批评。
最佳答案
这行中多余的分号是语法错误。for (var rollCount = 0; rollCount < numRolls; rollcount++;)
以后会在您的浏览器中打开JavaScript控制台,因为此错误会立即出现。
关于javascript - 可以输入多少个骰子,然后在最后一个骰子上只输出两个骰子的总和,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35544596/