1. 首頁
  2. 問答
  3. 如何在javascript中隨機化多個圖像

如何在javascript中隨機化多個圖像

2017-07-12 19 views
0

我對JavaScript很有新意（我的研究有點超過2個月），並開始我的第一個項目。最終目標是每次點擊一個按鈕時都會有一組棒球隊徽標圖像（現在是6張圖像，但最終我想將其擴展到更多）。我研究過如何做到這一點，並遇到了while循環中使用的fisher yates算法以及隨機數生成的各種用法。決定使用漁民yates。如何在javascript中隨機化多個圖像

此刻，我的代碼似乎工作。我跟着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"; 
    });

來源

2017-07-12 user2247061

回答

2

只需添加一個id到div類= 「行」 ID = 「父」>

，更換這樣的代碼。

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端。

來源

2017-07-12 05:25:53

相關問題

 相關問題