Question

我想用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>

Answer 1

我认为做一个想要做的更好的方法是返回一个shuffle数组，并在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;

};

您可以通过以下方式使用它：shuffle(myimages);

编辑：

我的意思是，您可以将所有内容放到两个函数中。

第一个是随机播放，第二个是“表情符号”。

您可以执行以下操作：

 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表示所需的数字！

来源：

https://gomakethings.com/how-to-shuffle-an-array-with-vanilla-js/ https://www.w3schools.com/jsref/met_node_appendchild.asp

Answer 2

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

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 是您列表中的随机图像

javascript随机图像生成器

2 个答案: