随机图像显示，无重复，使用Javascript [英] Random Image Display, Without Repeat, with Javascript

问题描述

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

I know there are already a few questions like this, but I just can't seem to apply any of the answers (this is my first time making anything like this at all). I currently have a page that, when a button is pushed, a random image appears (thanks to some of the great posts on here, this is actually working). My issue is, the random number has a lot of repeats prior all the images being seen. I am wanting to make it where all images are seen (in a random order) before any duplicates. This is what is in the body:

<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，然后重置它。尽我所能，我无法成功地将其集成到我的代码中:(。这就是我最终得到的结果（它什么也没做，完全打破了这个功能）：

From what I have read, the way to do this would be to add a spice, and have shown images dropped into a new array, then once the original array equals 0, then have it reset. Try as I might, I have not been able to successfully integrate that into my code :( . This is what I ended up with (which does nothing, and breaks the function entirely):

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

提到的另一种方法似乎要有一个首先洗牌的功能，然后在洗牌中显示它们d命令，然后重新洗牌并重复，但我对此的影响甚至更小。

Another method mentioned seemed to be to have a function that shuffled the images first, then displayed them in the shuffled order, then reshuffled and repeated, but I got even less far with that.

似乎还有一些问题是随机数max是否应该是imagesArray.length单独或+1或-1。我相信这也存在其他一些问题，但就像我说的那样，这是我的第一次尝试。任何帮助表示赞赏。

There also seems to be some question on whether the random number max should be imagesArray.length by itself, or +1 or -1. I am sure there are a number of other issues with this as well, but like I said, this is my first attempt. Any help is appreciated.

推荐答案

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

You should keep track of the numbers that you have generated, and if its a repeat then get a new number.

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！