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

How to add while loop to randomizer

本文关键字：随机 发生器 添加 循环 while      更新时间：2023-09-26

我正在尝试学习JavaScript，并创建了一个网站，该网站从数组中随机化gif点击。

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

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

你首先需要得到它是哪个图像：

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

可循环的函数（或者只是做一个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);
}

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

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

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

为了扩展局部/全局变量，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非常快。

相关文章：