[Résolu] simulation d'ordonnancement d'un conteneur par AlexanderThunderlight - page 1

Bonjour,

J'ai un fichier .txt qui contient 3 informations par ligne ( heure Arrivée, son nom et sa machine). J'ai besoin de faire afficher les noms par ordre d’arrivée et qu'une animation les déplace en dessous de la bonne machine.

Mon problème est que ma page affiche tous les noms en même temps et les fait déplacer en même temps.

Merci d'avance pour votre aide, si vous avez des questions je suis à votre disposition.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
    <style>
        .toM1, .toM2{
            position:absolute;
            font-size: 2em; 
            /*background: #FFFFFF;*/
        }
    </style>
    
</head>
<body>
    <script>
        function toM1(distance){
            var div = $("div.toM1");
            div.delay(800);
            div.animate({left: '+=23%'}, "slow");
            div.animate({bottom: '-='+distance+'px'}, "slow");
        }
        function toM2(distance){
            var div = $("div.toM2");
            div.delay(800);
            div.animate({left: '+=75%'}, "slow");
            div.animate({bottom: '-='+distance+'px'}, "slow");
        }
        function getXMLHttpRequest() { /* Instance XMLHTttpRequest */
            var xmlhttp = null;
            if (window.XMLHttpRequest || window.ActiveXObject) {
                if (window.ActiveXObject) {
                    try {
                        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } 
                    catch(e) {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }
                else {
                    xmlhttp = new XMLHttpRequest(); 
                }
            } 
            else {
                alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest.");
                return null;
            }
            return xmlhttp;
        }
 
        function getElements(){ /* Recupère liens dans fichier .txt*/
            var instance = getXMLHttpRequest(); /* Instance XMLHttpRequest*/
            instance.open('GET', 'machin.txt', false);
            instance.send(null);
            var ligne = instance.responseText.split('\n'); /* Stock tout le fichier dans la variable (tableau)*/
            var distance1 = 50;
            var distance2 = 50;
           
            for(i=0; i<ligne.length;i++){
                
                var MonDiv=document.createElement('DIV'); //création virtuelle de la balise div
                MonDiv.setAttribute('id', i); //attribut id
                
                ligne1= ligne[i]; //première ligne stocké dans la variable
                elements = ligne1.split(' ');//Stock les elements de séparément dans un tableau
                nom = elements[1]; //Récupération du nom
                machine = elements[2];//Récupération de la machine
                if(machine.trim() == "M1"){
                    MonDiv.className = 'toM1'; //doit être défini dans un style css
                    MonDiv.innerHTML = nom;
                    this.toM1(distance1);
                    distance1+=50;
                }
                else if(machine.trim() == "M2"){
                    MonDiv.className = 'toM2'; //doit être défini dans un style css
                    MonDiv.innerHTML = nom;
                    this.toM2(distance2);
                    distance2+=50;
                }
                document.body.appendChild(MonDiv); //ajoute la div sur la page web physiquement
            }   

            
        }
    </script>

<script type='text/javascript'>getElements();</script>

    <div class="row">
		<h1 class="col" style="text-align: center;">Machine 1</h1>
		<h1 class="col" style="text-align: center;">Machine 2</h1>

    </div>
</body>
</html>

0 C1 M1
1 C2 M2
1 C3 M1
2 C4 M2
3 C5 M1
3 C6 M2
4 C7 M1
4 C8 M2

Ceci est un exemple du fichier machin.txt

AlexanderThunderlight

18 février 2019 à 15:00:58

AliasDmc

20 février 2019 à 20:39:47

Bonjour AlexanderThunderlight,

Je t'ai fait un exemple rapide, d'éléments qui s'affichent toutes les 3 secondes

https://codepen.io/Zonecss/pen/mvgxVj

Découvrez les Css avec la zonecss.fr

21 février 2019 à 15:13:12

Merci beaucoup! C'est exactement ce qu'il me manquait.

J'ai rajouté les fonctions de déplacement et ça marche très bien!

simulation d'ordonnancement d'un conteneur

simulation d'ordonnancement d'un conteneur

Supprimer

Modérer

Signaler le message aux modérateurs