当我单击图像时,图像会随机变化,但是在单击后会重复出现某些图像。我该如何解决?
下面是我的队列。
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()]
}
只需创建一个名为say "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>