JSdierollsimulationwith6dieimages

JS 掷骰子模拟，使用六张骰子图片。以下是代码示例：

HTML:

<div id="dice"></div>
<button onclick="rollDice()">掷骰子</button>

CSS:

#dice {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 20px;
}

.die {
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid black;
  border-radius: 50%;
}

JS:

function rollDice() {
  var dice = document.getElementById('dice');
  var total = 0;
  dice.innerHTML = '';
  for (var i = 0; i < 6; i++) {
    var value = Math.floor(Math.random() * 6) + 1;
    total += value;
    var die = document.createElement('div');
    die.className = 'die';
    die.style.backgroundImage = 'url(images/die' + value + '.png)';
    dice.appendChild(die);
  }
  dice.innerHTML += '<p>总数：' + total + '</p>';
}

此代码将生成一个方框和一个按钮。当用户点击按钮时，将在方框中生成六个具有随机数字的骰子图片。这些骰子的值将被添加在骰子下方的文本中。

CSS 包含两个样式：方框样式和骰子样式。方框样式用于将骰子嵌入其中，而骰子样式用于定义骰子的外观。

JS 包含一个 rollDice () 函数，该函数使用 getElementById() 方法获取方框，然后在其中循环六次将骰子添加到其中。对于每个骰子，