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>

根据我的阅读，这样做的方法是添加一个spice，并将图像显示放入一个新数组，然后一旦原始数组等于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>

提到的另一种方法似乎是拥有一个首先对图像进行洗牌，然后以洗牌的顺序显示它们，然后重新洗牌并重复的功能，但我对此的了解甚至更少。

似乎还有一些问题是随机数max是否应该是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>

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

1 个答案: