随机图像显示,无重复,使用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屋!