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

Version imprimable

19/10/2019, 11h57
RazOon

3 pièce(s) jointe(s)

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:
Pièce jointe 511181
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:
Pièce jointe 511185
J'avais quand même essayer une fonction mais j'ai pas compris comment l'utiliser:
Pièce jointe 511186

Merci d'avance pour votre aide.
19/10/2019, 12h00
javatwister

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???
19/10/2019, 12h21
RazOon

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

Tu peux regarder cette page d'exemple, si tu veux

Code:

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 :mouarf:

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:

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

24/10/2019, 10h23
RazOon

Reponse créer des images..

Merci je vais essayer de comprendre.