我正在创建一个概率表。用户应该在第一部分输入概率百分比,在第二部分他们写下他们遇到的东西(他们想要什么),在第三部分和第四部分,程序自动组织哪个骰子结果导致得到答案。在骰子下面,你应该在滚动后出现文字,例如"你遇到了一个汉堡包!"如果您滚动 31 ,例如。
在表格下方,运行代码时将有2个不可用的图像。这些应该是2个10面骰子。当您点击" roll"骰子显示数字0-99。如果有人能告诉我如何将图像添加到Stack Overflow,我会这样做。骰子已经起作用了,他们只是没有帮助找到"遭遇"是
你可能想知道我需要什么帮助,因为我可能没有解释它最好。
基本上,我如何做到这一点,当我将概率百分比放在第一列文本框中时,骰子结果显示在第三和第四列?
概率表中的第一行是它应该是什么样的,以下3是它应该如何工作的视觉效果。
如果您运行代码并且有点看到我在这里描述的内容,那将更有意义。如果有人感到困惑,我可以回答问题。
<!--Daniel-->
<!-- Nov 20, 2017-->
<doctype! html>
<html>
<body>
<head>
<title>Wandering Monster Table</title>
</head>
<table style="width:100%">
<tr>
<th>Probablility Percentage</th>
<th>Encounter</th>
<th>Minimum roll</th>
<th>Maximum roll</th>
</tr>
<tr>
<td><input type="text" id="prob1" value=""></td>
<td><input type="text" id="Encounter1" value=""></td>
<td>??</td>
<td>??</td>
</tr>
<tr>
<td>5%</td>
<td>giant snake</td>
<td>25</td>
<td>29</td>
</tr>
<tr>
<td>20%</td>
<td>hamburgers</td>
<td>30</td>
<td>49</td>
</tr>
<tr>
<td>50%</td>
<td>A wolf dressed as your grandmother</td>
<td>50</td>
<td>99</td>
</tr>
</table>
<script> <!--Declares the possible variables-->
var side0=new Image()
side0.src="d10_0.png"
var side1=new Image()
side1.src="d10_1.png"
var side2=new Image()
side2.src="d10_2.png"
var side3=new Image()
side3.src="d10_3.png"
var side4=new Image()
side4.src="d10_4.png"
var side5=new Image()
side5.src="d10_5.png"
var side6=new Image()
side6.src="d10_6.png"
var side7=new Image()
side7.src="d10_7.png"
var side8=new Image()
side8.src="d10_8.png"
var side9=new Image()
side9.src="d10_9.png"
</script>
<center>
<h1>Wandering monster table</h1>
<img src="d10_0.png" name="die1">
<img src="d10_0.png" name="die2">
<form>
<input type="button" value="Click here to roll" onClick="roll()">
</form>
</center>
<script> <!--Randomly chooses a variable between 0 and 5-->
function roll(){
var random=Math.round(Math.random()*10)
document.images["die1"].src=eval("side"+random+".src")
var random2=Math.round(Math.random()*10)
document.images["die2"].src=eval("side"+random2+".src")
}
</script>
</body>
</html>
&#13;