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 立方体。

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

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

有人知道我应该看哪里吗？

(抱歉，格式有点乱，但这是我的第一次)。

谢谢。

Answer 1

如果您必须保持完全相同的 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';
}

参见 demo .

但是，如果允许更改 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';
}

参见 demo .