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

标签 javascript jquery html css

我正在尝试学习 JavaScript 并制作了一个网站,该网站从数组中随机生成 gifs onclick。

我现在想做的是插入一个 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]+'" />');
    });
});

最佳答案

你首先需要得到它是哪张图片:

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

关于javascript - 如何将while循环添加到随机发生器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27786169/

相关文章:

javascript - html jquery 数据属性

javascript - 在将项目提交到购物车时防止页面重新加载。

html - 使图像 float 到 HTML 列表的左侧

javascript - 循环遍历 Javascript 表单中的可见输入元素?

javascript - 使用 CSS 更改悬停时多个元素的属性

javascript - 如何解决 "has no method ' push'”错误?

javascript - 单击按钮时如何在同一页面中显示表单

Javascript RegEx 使用全局修饰符产生不寻常的结果

javascript - 如何在nodejs中获取项目的单独id

jQuery UI 按钮单选很难通过长鼠标点击进行选择