javascript - 制作一个显示骰子图片的多个随机骰子滚筒。为什么我的代码不起作用？

Question

尝试让它掷多个骰子并显示骰子图片

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 中生成的随机数，但我希望它有分配的图片。我不太了解并尝试添加变量，但我没有运气。

Answer 1

确保你为你的骰子定义了正确的 css 类

并为特定的骰子类别使用数字

例如:

'<div class="dice _'+diceRoll +'">' + diceRoll + '</div>'

然后使用以下 css 类:

.dice._6 {
background-image: url();
}

.dice._5 {
background-image: url();
}

等..