无重复的随机图像

Question

当我点击图片时，图片是随机变化的，但碰巧有一些图片在点击后重复出现。我该如何解决？

下面是我的队列。

let h1 = document.querySelector('h1')
let bigSquare = document.createElement('div')
bigSquare.id = 'bigSquare'
h1.after(bigSquare)

let images = ['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg']

let randomImage = function(){
   return (Math.round(Math.random()*(images.length-1)))
}

let image = document.createElement('img')
bigSquare.append(image)
image.src = images[randomImage()]

image.onclick = function(event){
   event.target.src = images[randomImage()]
}

Answer 1

只需创建一个名为 "randNumb" 的变量，它存储其中生成的随机数，每当单击图像时，将先前的随机数与新的随机数进行比较，如果它们不同，则更改 img src 否则运行再次随机图像功能。

检查并运行以下代码片段以获取上述方法的实际示例：

let h1 = document.querySelector('h1');
let bigSquare = document.createElement('div');
let randNumb = 0;
bigSquare.id = 'bigSquare';
h1.after(bigSquare);

let images = ['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg'];


let image = document.createElement('img');
bigSquare.append(image);
image.src = images[randNumb];

let randomImage = function(){

  let x = Math.round(Math.random()*(images.length-1)); // get random number
  
  if (x == randNumb) {
    randomImage(); // same random number so run function again
  } 
  else {
    randNumb = x;
    image.src = images[randNumb]; // not same random number so change src
    
    console.log("The image src right now is: " + image.src);
  }  
}

image.onclick = function(){randomImage()};

<h1></h1>