如何在使用Javascript單擊另一個時顯示多個隨機圖像？

我目前正試圖製作一個圖片，點擊後，消失並顯示三張隨機圖片。到目前爲止，我認爲可能會複製可點擊圖片兩次，只是讓這些不可見的圖片可以正常工作，因此它們會更改爲隨機圖片之一，並在點擊圖片後變爲可見。如果你有任何其他想法可以工作，我真的很想知道！如何在使用Javascript單擊另一個時顯示多個隨機圖像？

也沒有人知道我是如何做到這一點，使一個圖像只能用於三個景點之一，所以你總是有三個不同的隨機圖像相鄰。

這裏是我的JS和HTML：

var playerImg; 
 
var playerImg2; 
 
var playerImg3; 
 
var playerArray = ["A1.png", "A2.png", "A3.png", "A4.png", "A5.png", "M1.png", "M2.png", "M3.png", "M4.png", "M5.png", "V1.png", "V2.png", "V3.png", "V4.png", "V5.png", "D1.png", "D2.png", "D3.png"]; 
 

 
function openPack() { 
 
    var randomPlayer = (Math.floor(Math.random() * 18) + 1); 
 
    playerImg = playerArray[randomPlayer - 1]; 
 
    document.getElementById("pack").src = "image/" + playerImg; 
 

 
    var randomPlayer2 = (Math.floor(Math.random() * 18) + 1); 
 
    playerImg2 = playerArray[randomPlayer2 - 1]; 
 
    document.getElementById("player2").src = "image/" + playerImg2; 
 

 
    var randomPlayer3 = (Math.floor(Math.random() * 18) + 1); 
 
    playerImg3 = playerArray[randomPlayer3 - 1]; 
 
    document.getElementById("player3").src = "image/" + playerImg3; 
 
} 
 

 
document.querySelectorAll("img#player2")[0].addEventListener("click", openPack);

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
</head> 
 

 
<body> 
 
    <img id="pack" src="image/pack.png" alt="Unopened pack"> 
 
    <img id="player2" src="image/pack.png" alt="Place for a second player after the pack is opened"> 
 
    <img id="player3" src="image/pack.png" alt="Place for a third player after the pack is opened"> 
 
    <img id="veld" src="image/veld.png" alt="Football field with positions"> 
 

 

 

 
</body> 
 
<script src="scripts/packs.js"></script> 
 

 
</html>

讓我知道如果我忘了告訴的東西，謝謝您！

來源

2017-04-10 Donsco

這裏新openPack功能，將排除重複

function openPack() { 
    var playerArraycopy = playerArray.slice();//getting new copy of initial input 
    function getRandomImg(){ 
     return playerArraycopy.splice([Math.floor(Math.random() * playerArraycopy.length)],1)[0];//calculating a new random image and removing it from copy to exclude duplicates 
    } 

    document.getElementById("player2").src = "image/" + getRandomImg(); 
    document.getElementById("pack").src = "image/" + getRandomImg(); 
    document.getElementById("player3").src = "image/" + getRandomImg(); 
}

檢查Array.splice瞭解更多信息

來源

2017-04-10 17:48:09

如何在使用Javascript單擊另一個時顯示多個隨機圖像？

回答

相關問題