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

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

只需将一个ID添加到div class =“ row” id =“ parent”>

并替换这样的代码。

   var button = document.getElementById("button");
   var reset = document.getElementById("reset");
   var originalChildren = 
   Array.from(document.getElementById("parent").children);

   button.addEventListener("click", function random() {
     var list = document.getElementById("parent");
     for (var i = list.children.length; i >= 0; i--) {
         list.appendChild(list.children[Math.random() * i | 0]);
     }
   });

   reset.addEventListener("click", function reset() {
     document.getElementById("parent").innerHTML = "";
     for (var i =0 ; i< originalChildren.length; i++) {
        document.getElementById("parent").appendChild(originalChildren[i]);
     }
   });

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

Answer 2

这是一个小提琴，可能会对您有所帮助： https : //jsfiddle.net/yha6r5sy/1/

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

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

问题描述

2 个解决方案

解决方案1
3 2017-07-12 05:25:53

解决方案2
1 2017-07-12 06:53:10

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

问题描述

2 个解决方案

解决方案1 3 2017-07-12 05:25:53

解决方案2 1 2017-07-12 06:53:10

解决方案1
3 2017-07-12 05:25:53

解决方案2
1 2017-07-12 06:53:10