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

**RazOon** · 19/10/2019, 11h57

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

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

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.

**javatwister** · 19/10/2019, 12h00

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???

**RazOon** · 19/10/2019, 12h21

Il est expliqué dans le message que je débute, notre prof nous a appris que sa pour l'instant.

**javatwister** · 20/10/2019, 18h03

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

**javatwister** · 22/10/2019, 14h33

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

**RazOon** · 24/10/2019, 10h23

Merci je vais essayer de comprendre.

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

JavaScript

Discussions similaires

Partager

Partager