Javascript 如何将while循环添加到随机化器

我正在努力学习JavaScript，并制作了一个网站，该网站将gifs onclick从一个数组中随机化

我现在想做的是插入一个while循环，这样它就可以将当前的GIF与下一个随机图像进行比较，这样就不会显示重复的图像，但我不能完全弄清楚我做错了什么，很可能是语法问题

HTML

随机发生器
这个图像是随机的

JavaScript

var randomImage=新数组（）；
randomImage[0]=“images/1.gif”；
randomImage[1]=“images/2.gif”；
randomImage[2]=“images/3.gif”；
函数getRandomImage（）{
var number=Math.floor（Math.random（）*randomImage.length）；
文件。写（“”）；
}
$（函数（）{
$（'a.click'）。单击（函数（e）{
e、 预防默认值（）；
var number=Math.floor（Math.random（）*randomImage.length）；
$（this.html（“”）；
});
});

您首先需要获取图像：

var randomImage = new Array();

randomImage[0] = "images/1.gif";
randomImage[1] = "images/2.gif";
randomImage[2] = "images/3.gif";

function getRandomImage() { 
    var number = Math.floor(Math.random()*randomImage.length);
    document.write('<img src="'+randomImage[number]+'" />');
}

$(function() {
    $('a.click').click(function(e) {
        e.preventDefault();
        var number = Math.floor(Math.random()*randomImage.length);
        $(this).html('<img src="'+randomImage[number]+'" />');
    });
});

然后做一个可循环的函数（或者只是做一个while循环，我喜欢这样做）

var random_images_array=['smile.gif'、'stream.gif'、'grim.gif'、'bomb.gif'；
函数getRandomImage（imgAr，路径）{
path=path | |'images/'；//此处的默认路径
var num=Math.floor（Math.random（）*imgAr.length）；
var img=imgAr[num]；
var imgStr=''；
document.write（imgStr）；document.close（）；
}

查看此链接。它告诉你你需要知道的一切

---

创建数组，将所有图像名称（或它们的索引，如果对您更合适的话）放入其中，然后使用如下内容：

var random_images_array = ['smile.gif', 'frown.gif', 'grim.gif', 'bomb.gif'];

function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}

---

基本上，每次调用此函数时都会返回一个随机图像名称（或索引，如果需要），直到此数组中没有图像为止。

很简单，保存函数中的最后一个图像。这将生成一个全局变量。全局变量是存在于所有函数中的变量，因为局部变量只存在于函数本身中（其他函数不能使用它）

现在，创建一个全局变量（只有在源代码中的图像之后加载javascript，或者在文档准备就绪的情况下，才能执行此操作）来存储图像，并使用该变量：

<img id="RandomImage" src="transparant.png" />

---

这会快得多。Javascript现在知道要更改什么图像，它不必每次调用都创建一个新的图像（向DOM插入元素需要耗费大量资源），而且

.src

只需更改源代码即可快速更改。

@Xero这不是他的problem@ntgCleaner我不是在发布答案，我是在发布评论。。。阅读评论说明。。。“建议改进”@xero，你说得对。你可以提出改进建议。我可以建议你改进你的评论以获得更多的信息，但这是离题的。你的建议不是老年退休金计划问题的一部分。我也不会建议你发布一个答案。如果出于某种奇怪的原因，随机的numbver仍然是一个（最小的机会！），可能会导致浏览器崩溃，那么这可能会变得非常递归。这不是一个真正的问题，但需要注意的是：）您可以通过创建一个数组来存储所有以前随机生成的数字，并根据数组中的值测试新的

number

，从而消除不希望出现的递归性。这将防止单次加载中出现重复。一旦数组达到图像数量的大小，您只需重置数组，这样图像就可以继续循环。Great point@AoN和Martijn，如果OP需要，我将更新sureNo downvote的答案，因为我喜欢不同的aproach，但数组函数的使用成本相对较高，不需要，只需通过键访问：）我用数组创建了它，因为名为“1.gif”、“2.gif”、“3.gif”的图像看起来非常糟糕。使用数组时，您至少可以使用真实世界的名称或散列。我同意这些名称，但

images[RANDOM]

会更好：）事实上，这已经准备好了；）是的，现在我明白了：D，我现在还记得为什么我停止了stackoverflow上的任何活动，因为有时候理解“用户想要什么”对我来说真的很难。@NikolayTalanov我刚刚把'1.gif'作为填充词，但你有什么建议吗？如果我收集了100个或1000个GIF，那么将它们写成这样的数组并取出会是一种不好的做法吗？有没有更快的方法来提取图像？我开始这是一个小项目，但现在我只是试图增加它的大小，因为我知道，所以任何方向是赞赏：）感谢马蒂恩的回应！这似乎是我最好的方法，因为我能理解它哈哈。当我复制并粘贴第一块代码时，它仍然会多次随机地对同一个图像执行操作，是否需要更改图像等。。在html中，或者除了您编写的内容之外，添加任何其他js？最后一个问题——例如，如果我想要100或1000个gif，是否需要一个数组，比如写出“randomImage[1125]=“images/gif.gif”；”这是一种糟糕的练习方法吗？为什么？这种方法会影响加载时间吗？再次感谢你的建议！

function placeRand(number){
    if(number != returnImgNum()){
        document.write('<img src="'+randomImage[number]+'" />');
    } else {
        placeRand(number){
    }
}

function getRandomImage() { 
    var number = Math.floor(Math.random()*randomImage.length);
    placeRand(number);
}

var random_images_array = ['smile.gif', 'frown.gif', 'grim.gif', 'bomb.gif'];

function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}

var images = ["/first.png", "/second.png", "/third.png", "/fourth.png", "/fifth.png"];
function takeImage() {
  // if there is no more images in array, do something or return placeholder image
  //if (!images.length) doSomething(); 
  var image = images.splice(Math.floor(Math.random() * images.length), 1);
  return image[0];
}

// Define it outside of the function so the next time the called
// function gets it still has a value:
var lastNumber=0;
var imagesLength = randomImage.length; // don't recalc the amount of images every time
function getRandomImage(){ 
    var number=0; // start a local variable
    while( number == lastNumber){
        number = Math.floor(Math.random()*imagesLength );
    }
    document.write('<img src="'+randomImage[number]+'" />');
}

<img id="RandomImage" src="transparant.png" />

//  save reference to image, global (before the function):
var Image2Random = document.getElementById('RandomImage');
// place this instead of the document write.
Image2Random.src = randomImage[number];