генератор случайных изображений javascript - PullRequest
Новая
       7

генератор случайных изображений javascript

0 голосов
/ 17 марта 2019

Я хочу создать контейнер с 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>

Ответы [ 2 ]

1 голос
/ 18 марта 2019

Я использовал этот способ в своем проекте. Создание функции перемешивания: 

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 - случайные изображения из вашего списка

1 голос
/ 17 марта 2019

Я думаю, что лучший способ сделать то, что вы хотите, - это вернуть массив случайных чисел и вставить его в элемент DOM в функции emoji. Это функция для перемешивания массива. 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...