随机图像显示，不重复，使用 Javascript

Question

我知道已经有一些这样的问题，但我似乎无法应用任何答案（这是我第一次做这样的事情）。我目前有一个页面，当按下按钮时，会出现一个随机图像（感谢这里的一些很棒的帖子，这实际上是有效的）。我的问题是，在看到所有图像之前，随机数有很多重复。我想让它在任何重复之前都可以看到所有图像（以随机顺序）。这就是身体里的东西：

<form name="imageForm">
  <table border=3>
   <tr align="center">
    <td>
      <input onclick="displayImage();" type=button value="Click Here">
    </td>
  </tr>
  <tr>
    <td>
      <img src="blank.jpg" name="canvas" />
    </td>
  </tr>
  </table>
</form>

这是脚本：

<script language="javascript">

var imagesArray = [
'images/img-1.jpg',
'images/img-2.jpg',
'images/img-3.jpg',
'images/img-4.jpg',
'images/img-5.jpg',
];

function displayImage(){

    var num = Math.floor(Math.random() * (imagesArray.length));

    document.canvas.src = imagesArray[num];

    }

</script>

根据我的阅读，这样做的方法是添加一个香料，并将显示的图像放入一个新数组中，然后一旦原始数组等于 0，然后将其重置。尽我所能尝试，我无法成功地将它集成到我的代码中:(。这就是我最终得到的结果（什么都不做，完全破坏了函数）：

<script>

var imagesArray = [
'images/img-1.jpg',
'images/img-2.jpg',
'images/img-3.jpg',
'images/img-4.jpg',
'images/img-5.jpg',
];

var shownImages = []

function displayImage(){

    var num = Math.floor(Math.random() * (imagesArray.length));
    document.canvas.src = imagesArray[num];

    shownImages.unshift(imagesArray.splice(num,num+1));

    if(images.length == 0){
     images.Array = shownImages;
     shownImages = [];

     return shownImages[0];

    }
</script>    

提到的另一种方法似乎是有一个功能，首先打乱图像，然后以打乱的顺序显示它们，然后重新打乱并重复，但我没有走得更远。

关于随机数最大值是否应该是 imagesArray.length 本身，还是 +1 或 -1 似乎还有一些问题。我相信这还有很多其他问题，但就像我说的，这是我的第一次尝试。任何帮助表示赞赏。

Answer 1

您应该跟踪生成的数字，如果重复，则获取一个新数字。

<script language="javascript">

var imagesArray = [
'images/img-1.jpg',
'images/img-2.jpg',
'images/img-3.jpg',
'images/img-4.jpg',
'images/img-5.jpg',
];

var usedImages = {};
var usedImagesCount = 0;

function displayImage(){

    var num = Math.floor(Math.random() * (imagesArray.length));
    if (!usedImages[num]){
        document.canvas.src = imagesArray[num];
        usedImages[num] = true;
        usedImagesCount++;
        if (usedImagesCount === imagesArray.length){
            usedImagesCount = 0;
            usedImages = {};
        }
    } else {
        displayImage();
    }
}

</script>