javascript随机图像生成器_Javascript_Html_Generator

javascript随机图像生成器

javascript html

javascript随机图像生成器,javascript,html,generator,Javascript,Html,Generator,我想做一个容器有25个图像，这是随机生成的72个图像，我不希望容器有相同的图像两次。这是我写的代码。谢谢你的帮助以下是项目： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <style> *{padding: 0;m

我想做一个容器有25个图像，这是随机生成的72个图像，我不希望容器有相同的图像两次。这是我写的代码。谢谢你的帮助

以下是项目：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <style>
            *{padding: 0;margin: 0;}
            .lotto{width: 600px;height: 600px;}
            .bild{height: 96px;width: 96px;padding-top: 10px;padding-left: 10px;padding-bottom: 10px;padding-right: 10px;}
            @media screen and (max-width:600px){.lotto{width: 400px;height: 400px;}.bild{height: 64px;width: 64px;padding-top: 6px;padding-left: 6px;padding-bottom: 6px;padding-right: 6px;}}
            @media screen and (max-width:400px){.lotto{width: 300px;height: 300px;}.bild{height: 48px;width: 48px;padding-top: 4px;padding-left: 4px;padding-bottom: 4px;padding-right: 4px;}}
        </style>
    </head>
    <body>
        <div class="Lotto">
            <script type="text/javascript">
                    function Emoji(){
                    var myimages=new Array()
                    myimages[1]="img_1.png"
                    myimages[2]="img_2.png"
                    myimages[3]="img_3.png"
                    myimages[4]="img_4.png"
                    myimages[5]="img_5.png"
                    myimages[6]="img_6.png"
                    myimages[7]="img_7.png"
                    myimages[8]="img_8.png"
                    myimages[9]="img_9.png"
                    myimages[10]="img_10.png"
                    myimages[11]="img_11.png"
                    myimages[12]="img_12.png"
                    myimages[13]="img_13.png"
                    myimages[14]="img_14.png"
                    myimages[15]="img_15.png"
                    myimages[16]="img_16.png"
                    myimages[17]="img_17.png"
                    myimages[18]="img_18.png"
                    myimages[19]="img_19.png"
                    myimages[20]="img_20.png"
                    myimages[21]="img_21.png"
                    myimages[22]="img_22.png"

                    var ry=Math.floor(Math.random()*myimages.length)
                    if (ry==0)
                    ry=1
                    document.write('<a href="#"><img class="bild" src="'+myimages[ry]+'" border=0></a>')
                    }
            </script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
            <script type="text/javascript">Emoji()</script>
        </div>
    </body>
</html>

我认为更好的方法是返回一个无序数组，并在emoji函数中插入DOM元素。这是一个洗牌数组的函数

var shuffle = function (array) {

    var currentIndex = array.length;
    var temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;

};

你可以这样使用：shufflemyimages

编辑：

我的意思是，你可以把所有的东西放在两个函数中

第一种是洗牌，第二种是表情符号

你可以这样做：

 function Emoji(){
    var myimages=new Array()
  for(i=0; i < 23;i++) {
    myimages[i]="img_" + i +".png";
    }
  shuffle(myimages);
  //And then add it in the DOM element
  let lotto = document.getElementsByClassName('Lotto');
  for(j=0; j < 10; j++) {
    let a = document.createElement('a');
    let img = document.createElement('img');
    img.src = myimages[j];
    img.classList.add("bild");
    a.appendChild(img);
    lotto[0].appendChild(a);
    }
}

i表示img的总数，j表示您想要的数量

资料来源：

我在我的项目中使用了这种方式。创建随机播放功能：

在我创建一个包含72个数字的数组后，如下所示：

洗牌后ar：

然后显示随机图像，为每22幅图像创建一个变量

var img0 = "img_" + ar[0] + ".png";
var img1 = "img_" + ar[1] + ".png";

img0和img1是列表中的随机图像

您可能需要搜索。基于A的随机选择是合适的。如果图像数组的索引与图像编号匹配，为什么不循环它？最好的方法是将这些元素存储在数组中，存储渲染图像的索引，并检查以确保尚未使用图像索引。当然，当用户刷新页面时，这将重新开始。只是一个想法。你在这上面花了太多的精力。还可以尝试查看jQueryAPI。你应该做的是调用document.ready上的emoji函数，并使该函数将每个图像附加到其容器中…23次。嘿，一旦你有了23个图像URL的数组，就可以这样做。当然，您必须添加html来呈现img html，但是使用元素作为URL我不知道如何将其与代码一起使用，您能再解释一下吗？谢谢，但是哪个dom元素？dom元素是什么意思？抱歉，我是javascriptI的新手，我喜欢在dom ready上创建23个图像URL的动态数组，兄弟，你不能编辑我的代码，你必须制作你自己的JSFIDLE并共享它……//有很多方法和更短的方法，但这是我作为初学者使用的方法。shuffle函数使用数组中的另一个随机数更改数组的第一个值，而不重复。在你洗牌数组中的所有元素后，然后调用映像用一个随机数img_+ar[0]+.png；调用每个图像；。这里的随机数是ar[0]为什么需要这些图像？这些图像被称为img_1、img_2和img_3等等。。。直到img_72

var ar = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27, // to 72];

shuffle(ar);

var img0 = "img_" + ar[0] + ".png";
var img1 = "img_" + ar[1] + ".png";