时间戳

首页 > 解决方案 > javascript随机图像生成器

javascript - javascript随机图像生成器

问题描述

我想制作一个包含 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>

标签： javascripthtmlgenerator

解决方案

我在我的项目中使用了这种方式。 创建一个随机播放函数： 

function shuffle(arr) {
    for (var i = arr.length - 1; i > 0; i--) {
        var m = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[m]] = [arr[m], arr[i]];
    }
}

在我创建一个包含 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];

洗牌后ar：

shuffle(ar);

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

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

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

推荐阅读