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 :

Créer des images en fonction d'une liste.


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2019
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Gard (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2019
    Messages : 4
    Par défaut Créer des images en fonction d'une liste.
    Bonjour,
    Je débute en javascript et j'ai un dm dans lequel je dois créer un tri à bulle et pour rendre le tout joli j'essaie de faire en sorte que la liste entrée par l'utilisateur s'affiche avec par dessus des barres bleu qui dépendent du nombre de chiffres de la liste et de leur taille. Un peu sous cette forme:
    Nom : Sorting_bubblesort_anim.gif
Affichages : 220
Taille : 113,6 Ko
    1 2 3 4 ...
    Bon avec l'animation du tri cela serait géniale mais je ne pense pas y arriver. Mais en gros je voudrais que cela ressemble à sa avec mes valeurs en dessous de chaque ligne donc je suppose qu'il faut créer une fonction permettant d'afficher un certain nombre d'image en fonction du nombre de valeurs dans la liste mais je ne sais pas faire C'est pour cela que je vous demande votre aide. je vous montre quand même mon code de base ma liste de nombre s'appelle nombre:
    Nom : Capture.PNG
Affichages : 314
Taille : 17,5 Ko
    J'avais quand même essayer une fonction mais j'ai pas compris comment l'utiliser:
    Nom : Capture2.PNG
Affichages : 203
Taille : 5,5 Ko

    Merci d'avance pour votre aide.

  2. #2
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    document.write???

    Tu es sérieux? C'est un devoir qu'on t'a donné en 1995 et que tu n'as toujours pas rendu???

  3. #3
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2019
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Gard (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2019
    Messages : 4
    Par défaut
    Il est expliqué dans le message que je débute, notre prof nous a appris que sa pour l'instant.

  4. #4
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    Tu peux regarder cette page d'exemple, si tu veux


    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     
     
    <title>...</title> 
    <head>
     
    <style type="text/css">
    .barre{
            text-align:center;
            vertical-align:bottom;
            display:inline-block;
            margin:2px;
    }
    </style>
     
    <script type="text/javascript">
     
    window.addEventListener("load",()=> {
            const el=(id)=>{return document.getElementById(id)};
            const t3=[];
     
            for(j=0;j<20;j++){
                    t3.push(Math.ceil(Math.random()*200))
            }
     
            let i=0, col;
            
            const go=setInterval(()=>{
                    if(i==t3.length){
                            clearInterval(go)
                    };
                    while(el("zone").lastChild){
                            el("zone").removeChild(el("zone").lastChild)
                    };
                    for(let j=0;j<t3.length;j++){
                            col= j==i ? "lime" : "orange";
                            let bar=document.createElement("div");
                            let bar2=bar.cloneNode(false);
                            let bar3=bar.cloneNode(false);
                            el("zone").appendChild(bar);
                            bar.appendChild(bar2);
                            bar.appendChild(bar3);
                            bar.className="barre";
                            bar2.style.cssText=`background:${col};width:50px;height:${t3[j]}px`;
                            bar3.textContent=t3[j];
                    }
                    
                    if(t3[i]>t3[i+1]){
                            t3.splice(i,2,t3[i+1],t3[i]);
                            i--;
                    }
                    else{
                            i++;
                    };
            },100)
    },true)
                                    
    </script>
     
    </head>
    <body>
     
    <div id="zone"></div>
     
    </body>
     
    </html>

    Mais je te préviens, c'est pas pédagogique du tout

  5. #5
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    Allez, un peu plus rentable parce que je ne change à chaque fois que 2 valeurs plutôt que de recharger l'ensemble du graphique.
    Et en plus j'ai même un peu commenté.

    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     
     
    <title>...</title> 
    <head>
     
    <style type="text/css">
    .barre{
            text-align:center;
            vertical-align:bottom;
            display:inline-block;
            margin:2px;
    }
    </style>
     
    <script type="text/javascript">
     
    // quand la page est chargée
    window.addEventListener("load",()=> {
            // variable pour raccourcir le nommage par id;
            const el=(id)=>{return document.getElementById(id)};
            let i=0;
            // création de 20 barres de hauteur aléatoire entre 1 et 200px
            for(let j=0;j<20;j++){
                            let v=Math.ceil(Math.random()*200);
                            let bar=document.createElement("div");
                            let bar2=bar.cloneNode(false);
                            let bar3=bar.cloneNode(false);
                            bar.appendChild(bar2);
                            bar.appendChild(bar3);
                            bar.className="barre";
                            bar2.style.cssText=`background:orange;width:30px;height:${v}px`;
                            // affichage de la hauteur sous chaque barre
                            bar3.textContent=v;
                            el("zone").appendChild(bar);
                    };
            
            // fonction rappelée en boucle tant que les barres ne sont pas triées
            // Si la barre a une hauteur supérieure à la suivante, on les intervertit
            const go=setInterval(()=>{
                    // variable désignant l'ensemble des barres
                    const b=el("zone").querySelectorAll(".barre")
                    // à chaque boucle, la barre testée redevient orange
                    b[i].childNodes[0].style.background="orange";
                    // Si la barre a une hauteur supérieure à la suivante, on les intervertit
                    if(i<b.length-1 && Number(b[i].textContent) > Number(b[i+1].textContent)){
                            el("zone").insertBefore(b[i+1],b[i]);
                            // On recule l'indice de 1 pour pouvoir retrier depuis le début
                            if(i>0){i--}
                    }
                    // Sinon, on augmente juste l'indice pour la boucle suivante
                    else if(i<b.length-1){
                                    i++;
                    };
                    // La barre testée est colorée
                    b[i].childNodes[0].style.background="lime";
                    // Quand on atteint la dernière barre, il n'y a plus rien à trier et on arrête
                    if(i==b.length-1){
                            b[i].childNodes[0].style.background="orange";
                            clearInterval(go)};
            },50);// Le tri recommence toutes les 50 millisecondes.
    },false)
                            
    </script>
     
    </head>
    <body>
     
    <div id="zone" style="text-align:center"></div>
     
    </body>
     
    </html>

    http://javatwist.imingo.net/bubulle.htm

  6. #6
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2019
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Gard (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2019
    Messages : 4
    Par défaut Reponse créer des images..
    Merci je vais essayer de comprendre.

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

Discussions similaires

  1. [AC-2007] Actualisation des champs en fonction d'une liste déroulante
    Par cool17 dans le forum IHM
    Réponses: 2
    Dernier message: 05/04/2010, 20h31
  2. créer des array numéroté à partir d'une liste
    Par tavarlindar dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 27/05/2008, 18h50
  3. images en fonction d'une liste de validation
    Par alsimbad dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 24/07/2007, 17h30
  4. Réponses: 4
    Dernier message: 22/05/2007, 17h24
  5. Créer des images en fonction de l'url
    Par kevinf dans le forum Langage
    Réponses: 16
    Dernier message: 12/08/2006, 19h38

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