Question

我是javascript的新手（我的学习时间超过2个月）并开始我的第一个项目。最终目标是每次点击一个按钮时，随机化一套棒球队徽标图像（现在有6张图片，但最终我想将其扩展到更多）。我研究了如何做到这一点，并遇到了在while循环中使用的fisher yates算法，以及随机数生成的各种用法。决定使用渔民。

目前，我的代码似乎正常工作。我跟着1张图片，我看不到特定的图案。我的其他问题是，如果我可以使用1循环实现相同的功能，并且还清理我的代码，所以它不那么重复。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>sports</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div class="container">
    <h1>Sports Random</h1>
    <br>
    <div class="row">
      <div class="col-sm-2"> <img id="team1"src="images\sports\team1.jpg" alt=""></div>
      <div class="col-sm-2"> <img id="team2"src="images\sports\team2.jpg" alt=""></div>
      <div class="col-sm-2"> <img id="team3"src="images\sports\team3.jpg" alt=""></div>
      <div class="col-sm-2"> <img id="team4"src="images\sports\team4.jpg" alt=""></div>
      <div class="col-sm-2"> <img id="team5"src="images\sports\team5.jpg" alt=""></div>
      <div class="col-sm-2"> <img id="team6"src="images\sports\team6.jpg" alt=""></div>
    </div>
    <br>
    <button id="button">Random</button>
    <button id="reset">Reset</button>
  </div>
  </div>

  <script src="js/main.js"></script>
</body>

</html>

 var button = document.getElementById("button");
    var reset = document.getElementById("reset");
    var team1 = document.getElementById("team1");
    var team2 = document.getElementById("team2");
    var team3 = document.getElementById("team3");
    var team4 = document.getElementById("team4");
    var team5 = document.getElementById("team5");
    var team6 = document.getElementById("team6");

    var pics = ["team1.jpg", "team2.jpg", "team3.jpg", "team4.jpg", "team5.jpg", "team6.jpg"];

    var teams = [team1, team2, team3, team4, team5, team6];


    button.addEventListener("click", function random() {

      var i = pics.length,
        rNum, temp;

      // shuffle pictures using fisher yates
      while (--i > 0) {
        rNum = Math.floor(Math.random() * (i + 1));
        temp = pics[rNum];
        pics[rNum] = pics[i];
        pics[i] = temp;
      }

      // display images
      for (var i = 0; i < teams.length; i++) {
        teams[i].src = "images\\sports\\" + pics[i];
      }


    });

    reset.addEventListener("click", function reset() {
      team1.src = "images\\sports\\team1.jpg";
      team2.src = "images\\sports\\team2.jpg";
      team3.src = "images\\sports\\team3.jpg";
      team4.src = "images\\sports\\team4.jpg";
      team5.src = "images\\sports\\team5.jpg";
      team6.src = "images\\sports\\team6.jpg";
    });

Answer 1

只需在div class =“row”id =“parent”＆gt;

中添加一个id

并替换这样的代码。

implicit

此外，我还建议动态创建子项，然后将它们附加到父项，而不是将它们放在HTML中。但是，这完全取决于你。修改了代码，因此您不必将元素保留在JS端。

Answer 2

这是一个可能对你有帮助的小提琴： https://jsfiddle.net/yha6r5sy/1/

您可以使用list.children将其添加到主div

如何在javascript中随机化多个图像

2 个答案: