IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Générer nombre aléatoire sans doublon


Sujet :

JavaScript

  1. #1
    Membre averti
    Homme Profil pro
    Lycéen
    Inscrit en
    Novembre 2022
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Novembre 2022
    Messages : 8
    Par défaut Générer nombre aléatoire sans doublon
    Bonjour à tous, j'ai une fonction qui me génère un nombre aléatoire pour modifier le background url de ma classe ".photo" en css, le problème est qu'a certain moment le même nombre aléatoire est généré et donc le même lien d'image est sélectionner, ce qui implique que la même image est affiché sur ma page. Comment puis-je régler cela ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    28
    var images = [];
    var photo = document.querySelectorAll(".photo");
     
    images[0] = "url(/images/test0.jpg)";
    images[1] = "url(/images/test1.jpg)";
    images[2] = "url(/images/test2.jpg)";
    images[3] = "url(/images/test3.jpg)";
    images[4] = "url(/images/test4.jpg)";
    images[5] = "url(/images/test5.jpg)";
    images[6] = "url(/images/test6.jpg)";
    images[7] = "url(/images/test7.jpg)";
    images[8] = "url(/images/test8.jpg)";
    images[9] = "url(/images/test9.jpg)";
     
    function random() {
      var random = Math.floor(Math.random() * 10);
      return random;
    }
     
    photo[1].style.backgroundImage = images[random()];
    photo[2].style.backgroundImage = images[random()];
    photo[3].style.backgroundImage = images[random()];
    photo[4].style.backgroundImage = images[random()];
    photo[5].style.backgroundImage = images[random()];
    photo[6].style.backgroundImage = images[random()];
    photo[7].style.backgroundImage = images[random()];
    photo[8].style.backgroundImage = images[random()];
    photo[9].style.backgroundImage = images[random()];
    Nom : Capture d’écran 2022-11-15 221308.png
Affichages : 511
Taille : 926,3 Ko

  2. #2
    Expert confirmé
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 127
    Par défaut
    Saut

    J'ai le code suivant dans mes archives
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    		<title>Liste de Nbr. aléatoire sans doublon</title>
    	</head>
    	<script>
                    //*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
                    function LstSansDbl(min, max){
                            let i;
                            let NumAlea;        //Indice aléatoire
                            let TblNb=[];       //Tableau/Arrays pour contenir les chiffres de mini à maxi
                            let TblAlea=[]; //Tableau/Arrays pour contenir les chiffres aléatoire de la plage min à max
                            // création du tableau/Arrays de min à max
                            for (i = min; i <= max; i++) {TblNb.push(i);}// ajout des éléments(chiffres) de plage min à max
                            // création du tableau/Arrays aléatoire, plage min à max
                            for (i = max - min; i >= 0; i--) {
                    NumAlea = Math.floor((i + 1) * Math.random());// tirage pseudo aléatoire
                    TblAlea[max - min - i] = TblNb[NumAlea];
                    if (NumAlea < i){TblNb[NumAlea] = TblNb[i];}
                            }
                            document.getElementById("NbrTotal").innerHTML = "Array de " + TblAlea.length + " éléments";
                            return TblAlea;
                    }//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
     
                    function afftirage() {
                            let deb = document.getElementById("id1").value * 1;
                            let fin = document.getElementById("id2").value * 1;
                            if (verif(deb,fin)) {return;}
                            //les entrées ont peut être été permutées
                            deb = document.getElementById("id1").value * 1;
                            fin = document.getElementById("id2").value * 1;
                            document.getElementById("lstarr").innerHTML = LstSansDbl(deb, fin);
                    }//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
     
                    function verif(val1, val2, valPrem) {
                            let Pobj = document.getElementById("lstarr")
                            if (val2 < val1){
                    document.getElementById("id2").value = val1;
                    document.getElementById("id1").value = val2;
                            }
                            //-----------------------------------------------------------------------------------
                            let inPobj = document.getElementById("id1");
                            if (inPobj.checkValidity() == false){
                                    Pobj.style.color = "white";
                                    Pobj.style.backgroundColor = "red";
                                    Pobj.innerHTML = 'Debut de plage: ' + inPobj.validationMessage;
                                    return true;
                            }
                            //-----------------------------------------------------------------------------------
                            inPobj = document.getElementById("id2");
                            if (inPobj.checkValidity() == false){
                                    Pobj.style.color = "white";
                                    Pobj.style.backgroundColor = "red";
                                    Pobj.innerHTML = 'Fin de plage: ' + inPobj.validationMessage;
                                    return true;
                            } 
                            //-----------------------------------------------------------------------------------
                            if (val1 == val2){
                                    Pobj.innerHTML = "Vous devez entrer une plage de valeur";
                                    return true;
                            }
                            //-----------------------------------------------------------------------------------
                            Pobj.style.color = "Black";
                            Pobj.style.backgroundColor = "white";
                            Pobj.innerHTML = "";
                            return false;
                    }//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
     
                    function ConvNum(C){
                            let result, ch = Number(C);
                            if (ch < 48 || ch >57){
                                    let Chiffres = [224,38,233,34,39,40,45,232,95,231];
                                    console.log("convertion");
                                    result = Chiffres.indexOf(ch);
                }else{
                                    result = String.fromCharCode(ch);
                            }
                            return result;
                    }//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
    *
                    function keypresson1(event){
                            let x = event.which || event.keyCode;
                            event.preventDefault();
                            if (x == 13) {document.getElementById("id2").focus();return};
                            let CVnumber = ConvNum(x);
                            let Pobj = document.getElementById("lstarr")
                            if (CVnumber == -1){
                                    Pobj.style.color = "white";
                                    Pobj.style.backgroundColor = "red";
                                    Pobj.innerHTML = 'Entrez un chiffre';
                            }else{
                                    Pobj.innerHTML = "";
                                    Pobj.style.color = "Black";
                                    Pobj.style.backgroundColor = "white";
                                    document.getElementById("id1").value = CVnumber;
                            }
                    }//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
     
                    function keypresson2(event){
                            let x = event.which || event.keyCode;
                            if (x == 13) {afftirage()};
                    }
            //*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
            </script>
    <body>
    	<div style="position:fixed; border: 1px solid black; padding: 15px; background-color: LightYellow; opacity: 0.95;">
    		<input type="number" id="id1" onkeypress="keypresson1(event)" min="0" max="9999" value="1" required>
    		<label for="id1">Debut de plage (0 à 9999)</label>
    		<br>
    		<input type="number" id="id2" onkeypress="keypresson2(event)" min="-9999" max="10000" value="9" required>
    		<label for="id2">Fin de plage (1 à 10000)</label>
    		<button onclick="afftirage()">Go</button>
    		<label id="NbrTotal"></label>
    	</div>
    	<div style="position:relative; top:110px; border:1px solid black; right:15px; left:0px; width:auto; z-index:-1; word-wrap:break-word;">
    		<p id="lstarr" style="margin: 2px 2px 2px 2px;"></p>
    	</div>
    </body>
    </html>
    Il y a peut être plus simple ....

    Motif de l'édit:
    Nettoyage du code
    Tout se passe dans la fonction LstSansDbl(min, max) l'array récupré en retour est TblAlea, tableau de chiffres aléatoire sans doublon.
    :whistle:pourquoi pas, pour remercier, un :plusser: pour celui/ceux qui vous ont dépannés.
    saut de ligne
    OOOOOOOOO👉 → → Ma page perso sur DVP ← ← 👈

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    Perso je passe plutot par un pop sur l'array, avec un rand sur le nombre d'éléments qu'il contient, ce qui évite d'avoir deux fois la même image vu qu'après chaque "tirage" une image est retirée de l'array
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 489
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 489
    Par défaut
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var images = [];
    var photo = document.querySelectorAll(".photo");
     
    images[0] = "url(/images/test0.jpg)";
    images[1] = "url(/images/test1.jpg)";
    images[2] = "url(/images/test2.jpg)";
    images[3] = "url(/images/test3.jpg)";
    images[4] = "url(/images/test4.jpg)";
    images[5] = "url(/images/test5.jpg)";
    images[6] = "url(/images/test6.jpg)";
    images[7] = "url(/images/test7.jpg)";
    images[8] = "url(/images/test8.jpg)";
    images[9] = "url(/images/test9.jpg)";
     
    const shuffledImages = images.sort((a, b) => 0.5 - Math.random());
     
    shuffledImages.forEach((id,i) => {
        photo[i].style.backgroundImage = id;
    });
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    En effet Dok le sort random est moins gournmand car l'array conserve son contenu.
    Cela suppose néamoins qu'il y ait exactement le même nombre de backgrounds à attribuer que d'images dans le tableau.
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 489
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 489
    Par défaut
    si on en est a donner son avis, j'aurai plutot fait une boucle sur les elements
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const images = [
    'url(/images/test0.jpg)',
    'url(/images/test1.jpg)',
    'url(/images/test2.jpg)',
    'url(/images/test3.jpg)',
    'url(/images/test4.jpg)',
    'url(/images/test5.jpg)',
    'url(/images/test6.jpg)',
    'url(/images/test7.jpg)',
    'url(/images/test8.jpg)',
    'url(/images/test9.jpg)'
    ];
    const shuffledImages = images.sort((a, b) => 0.5 - Math.random());
     
    document.querySelectorAll(".photo").forEach((photo,i) => {
        if(shuffledImages[i]) {
            photo.style.backgroundImage = shuffledImages[i];
        } else {
            console.log('no more image to set');
            // on peu imaginer mettre une image par default style placeholder
        }
    });
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  7. #7
    Membre averti
    Homme Profil pro
    Lycéen
    Inscrit en
    Novembre 2022
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Novembre 2022
    Messages : 8
    Par défaut
    Salut, merci ça fonctionne parfaitement !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. nombres aléatoires sans doublon c++ builder
    Par magdani dans le forum C++Builder
    Réponses: 6
    Dernier message: 03/12/2017, 19h40
  2. Tableau 2D de nombres aléatoires sans doublon de lignes
    Par lilalvine dans le forum Macros et VBA Excel
    Réponses: 10
    Dernier message: 17/02/2017, 21h06
  3. liste de nombres aléatoire sans doublon
    Par rudyhadoux2 dans le forum Langage
    Réponses: 10
    Dernier message: 14/09/2009, 18h30
  4. Réponses: 2
    Dernier message: 27/05/2007, 22h23
  5. Nombre aléatoire sans doublon
    Par Ardely dans le forum Delphi
    Réponses: 9
    Dernier message: 01/03/2007, 21h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo