尝试让它掷多个骰子并显示骰子图片
function rollDice() {
var numDice = document.getElementById("diceNum").value;
var container = document.getElementById("dieContainer");
container.innerHTML = "";
for (var i = 0; i < numDice; i++) {
var diceRoll = Math.floor(Math.random() * 6) + 1;
container.innerHTML += '<div class="dice">' + diceRoll + '</div>';
};
};
<h4>Choose number of dice to roll</h4>
<input id="diceNum" type="text" value="3">
<button onclick="rollDice()">Roll Dice</button>
<div id="dieContainer" class="dice"></div>
基本上现在我可以选择我想要从 1-6 中生成的随机数,但我希望它有分配的图片。我不太了解并尝试添加变量,但我没有运气。
最佳答案
确保你为你的骰子定义了正确的 css 类
并为特定的骰子类别使用数字
例如:
'<div class="dice _'+diceRoll +'">' + diceRoll + '</div>'
然后使用以下 css 类:
.dice._6 {
background-image: url();
}
.dice._5 {
background-image: url();
}
等..
关于javascript - 制作一个显示骰子图片的多个随机骰子滚筒。为什么我的代码不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58388215/