Question

我正在尝试学习JavaScript，并建立了一个网站，可以从一个数组中随机点击gifs。

我现在要做的是插入一个while循环，以便将currentgif与下一个随机化图像进行比较，这样就不会显示重复项，但我无法弄清楚我做错了什么，很可能是语法问题。

HTML

<!DOCTYPE html>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<html>

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="js/rand.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <head>
        <title>Randomizer</title>
    </head>

    <body> 

        <p>This image is random</p>
        <a href="#" class="click">
            <section> 
                <img>
                    <script>
                        getRandomImage()
                    </script>
                </img>  
            </section>
        </a>

    </body>

</html>

的JavaScript

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]+'" />');
    });
});

Answer 1

首先需要获取它的图像：

function returnImgNum(){
    var imgNum = parseInt($('img').attr('src').split("/")[1].replace('.gif', ""));
    return imgNum;
}

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

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);
}

Answer 2

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();
}

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

http://www.dyn-web.com/code/basics/random_image/random_img_js.php

Answer 3

创建数组，放入所有图像名称（或它们的索引，如果它对你更好），然后使用这样的东西：

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];
}

基本上，每个调用的这个函数将返回一个随机图像名称（或索引，如果你想），直到这个数组中没有图像。

Answer 4

简单，保存最后一张图片。这会产生全局变量。全局变量是存在于所有函数中的变量，因为局部变量仅存在于函数本身中（其他函数无法使用它）。

// 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]+'" />');
}

要扩展本地/全局变量，lastNumber是全局变量，因此可以在函数中访问。 var number是本地的，它只存在于函数中，函数外的console.log(number);将是undefined

为了提出改进建议，最好避免使用document.write。浏览器不喜欢它们（*无法找到支持的文档，随时可以编辑），预先创建一个图像，即使它是空白的：

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

现在你创建一个全局变量（只有在源中的图像之后加载javascript或准备好文档时才能这样做）来存储图像，并使用它：

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

这会快得多。 Javascript现在知道要更改哪个图像，它不必每次调用都创建一个新图像（向DOM插入元素的资源很昂贵），而.src实际上很快就只能更改源代码。

如何将while循环添加到随机数发生器

4 个答案: