Je veux créer un conteneur avec 25 images générées aléatoirement sur 72 images et je ne veux pas que le conteneur ait la même image deux fois. C'est le code que j'ai fait. Merci pour l'aide!

Voici le Projet :

<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>
-3
calledmaxi 17 mars 2019 à 21:40

2 réponses

Meilleure réponse

Je pense qu'une meilleure façon de faire ce que vous voulez est de retourner un tableau aléatoire et de l'insérer dans l'élément DOM de la fonction emoji. Il s'agit d'une fonction pour mélanger un tableau.

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;

};

Vous pouvez l'utiliser de cette façon : shuffle(myimages);

MODIFIER:

Ce que je veux dire, c'est que vous pouvez tout mettre dans deux fonctions.

Le premier est le shuffle et le second est le "emoji".

Vous pourriez faire quelque chose comme:

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

Avec i pour le nombre d'img au total, et j pour le nombre que vous voulez !

SOURCE:

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

1
Marin Mouscadet 17 mars 2019 à 22:30

J'ai utilisé cette méthode dans mon projet. Créer une fonction aléatoire :

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

Après avoir créé un tableau avec 72 nombres comme celui-ci :

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];

Après la lecture aléatoire ar :

shuffle(ar);

Ensuite, pour afficher une image aléatoire, créez une variable pour chaque 22 images

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

Et img0 et img1 sont des images aléatoires de votre liste

1
Marsidi 17 mars 2019 à 21:34