如何在使用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单击另一个时显示多个随机图像？

回答

相关问题