Javascript随机函数更改html文件中的图片

Question

我想寻求帮助来完成这项作业。 现在，在您转身离开之前，我没有要求任何人为我写任何东西。 我只需要有人指出我正确的方向。

因此，我需要创建一个骰子游戏。 我的问题是我在寻找一种将Javascript代码连接到HTML文件中的骰子的方法时遇到问题。

例如：

如果代码：

var dice1 = Math.round(Math.random() * 6);

给我说4，那么我想显示我的dice_4.png图片。

这是html文件上的多维数据集/骰子的代码。

<div class="wrap">
  <div class="cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"> </div>
  </div>
</div>

并在我的css文件中。

.front {
  background-image: url('Pildid/dice_1.png');
  background-size:100%;
}
.back {
  background-image: url('Pildid/dice_6.png');
  background-size:100%;
}
.right {
  background-image: url('Pildid/dice_4.png');
  background-size:100%;
}
.left {
  background-image: url('Pildid/dice_3.png');
  background-size:100%;
}
.top {
  background-image: url('Pildid/dice_2.png');
  background-size:100%;
}
.bottom {
  background-image: url('Pildid/dice_5.png');
  background-size:100%;
}

我使用了没有旋转的3D立方体。

回顾一下，当random给我第一个立方体说4时，我希望html向我展示css文件的.right部分。

不知道我在这里有多大的意义，如果这太令人困惑，会尝试更好地解释。

有人对我应该看的地方有什么想法吗？

（对不起，格式有点混乱，但这是我第一次来，没什么）。

谢谢。

Answer 1

 var number = Math.round(Math.random() * 5) + 1; document.getElementById("demo").innerHTML = number; var image = 'url(Pildid/dice_'+number +'.png)'; document.getElementById('image').innerHTML = image; // apply document.getElementsByClassName('image')[0].style.backgroundImage=image; 

 <p id="demo"></p> <div id="image"></div> <div class="image"></div> 

Answer 2

如果必须保持完全相同的HTML排列，则可以：

<div class="wrap">
  <div class="cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"> </div>
  </div>
</div>

然后，您需要一些方法将骰子编号与多维数据集的div关联。 我建议使用一组类名。

var dice1 = Math.round(Math.random() * 5);
var sides = ['front', 'top', 'left', 'right', 'bottom', 'back'];
var cubeSides = document.getElementsByClassName('cube')[0].children;
for (var i = 0; i < cubeSides.length; i++) {
  // If you only have a class associated to the cube side div's.
  cubeSides[i].style.display = cubeSides[i].className === sides[dice1] ? 'block' : 'none';
  // If you can have more than one class in the side div's, use this statement instead of the previous one.
  // cubeSides[i].style.display = cubeSides[i].className.split(' ').indexOf(sides[dice1]) > -1 ? 'block' : 'none';
}

参见演示 。

但是，如果允许更改HTML结构以将div的升序排列：

<div class="wrap">
  <div class="cube">
    <div class="front"></div>
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
    <div class="back"></div>
  </div>
</div>

然后代码变得更容易：

var dice1 = Math.round(Math.random() * 5);
var cubeSides = document.getElementsByClassName('cube')[0].children;
for (var i = 0; i < cubeSides.length; i++) {
  cubeSides[i].style.display = i === dice1 ? 'block' : 'none';
}

参见演示 。