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

jQuery Discussion :

Avoir deux chrono différents


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre habitué
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2014
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2014
    Messages : 9
    Par défaut Avoir deux chrono différents
    Bonjour,

    je suis en train de mettre en place une application web qui simule un temps de chargement. de Ce fait j'ai besoin d'avoir différent chrono complètement indépendant. Mon soucis est que malgres que ma variable pour le setInterval de mes deux chrono soit différente quand un des chrono s’arrête l'autre s'arrête également.

    un lien vers mon aps : http://leagueofdecadence.webou.net/Upbarre/apsweb.html

    et mon code JS:

    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
    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
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    /******Variable******/
     
    $test=$("#test");
    $test2=$("#test2");
     
    /****** initialisation des animations*******/
    function chargement() {
    	t=setInterval(function (){ modifValuesdown(); },40);
            t=setInterval(setTime, 10);
    	t2=setInterval(function(){ modifValuesup(); },20000);
            t2=setInterval(setTime2, 100);
    }
     
    /******Gestion de la valeur de la barre de download*****/
    function modifValuesdown(){
        var val = $('#progress progress').attr('value');
        if(val>=100){clearInterval(t); }
        var newVal = val*1+0.25;
        var txt = Math.floor(val)+'%';      
       if (val<100) { 
        $('#progress progress').attr('value',newVal).text(txt);
        $('#progress strong').html(txt);
     } else {
            test.innerHTML = "<strong>Téléchargement terminé</strong>";
        }
    };
    /******Gestion de la valeur de la barre d'upload'*****/
    function modifValuesup(){
     
        var val = $('#progress2 progress').attr('value');
        if(val>=100){clearInterval(t2); clearInterval(counter)}
        var newVal2 = val*1+1;
        var txt = Math.floor(newVal2)+'%';          
        $('#progress2 progress').attr('value',newVal2).text(txt);
        $('#progress2 strong').html(txt);
        if (val<100) { 
        $('#progress2 progress').attr('value',newVal2).text(txt);
        $('#progress2 strong').html(txt);
     } else {
           test2.innerHTML = "<strong>Upload terminé</strong>";
        }
    }
     
    /**************Action sur le bouton go************/
     $(document).ready(function(){
        $('#button').click(function() {
        res=0;
        $("progress").val(res);
           chargement();
        $('#button').css({"display":"none"});
        $('#endbutton').css({"display":"initial"});
        })
     })
     
    /**************Action sur le bouton end************/
     
     $(document).ready(function(){
        $('#endbutton').click(function() {
     
        clearInterval(t);
        clearInterval(t2)
        val=100
        load=100
      var val = $('progress').attr('value', 100);
        test.innerHTML = "<strong>Téléchargement terminé</strong>";
         test2.innerHTML = "<strong>Upload terminé</strong>"
     
     })})
     
    $("#tps").each(function(i) {
      $(this).delay(i * 2000).fadeIn();
    });
     
    /***********************TIMER DOWNLOAD ***************/
    /* variable setup */
    var hoursLabel = document.getElementById("hours");
    var minutesLabel = document.getElementById("minutes");
    var secondsLabel = document.getElementById("seconds");
    var totalSeconds = 0;
    var totalMinutes = 0;
    var totalHours = 0;
    var startHours = 0;
    var startMinutes = 0;
    var startSeconds = 0;
    var counter = 0;
    var timerOn = 0;
    var display = document.getElementById("display");
     
    /* demare le timer*/
    function startTimer(){
        if(timerOn == 1){return;}
        else if(timerOn == 0){
            /* initialise le timer et le démare */
            Start = new Date();
            startHours=Start.getHours(display);
            startMinutes=Start.getMinutes(display);
            startSeconds=Start.getSeconds(display);
            timerOn = 1;
        }
    }
     
    function setTime(){
        /* instal le timer , lit le temps, le compare a son ancienne valeur et incrémente l'horloge */
        MAJ = new Date();
        MAJ.setHours((MAJ.getHours(display)-startHours),
            (MAJ.getMinutes(display)-startMinutes),
            (MAJ.getSeconds(display)-startSeconds)
        );
        totalHours = MAJ.getHours(display);
        totalMinutes = MAJ.getMinutes(display);
        totalSeconds = MAJ.getSeconds(display);
        /* formate et réécrit les variable */
        secondsLabel.innerHTML = pad(totalSeconds);
        minutesLabel.innerHTML = pad(totalMinutes);
        hoursLabel.innerHTML = pad(totalHours);
    }
     
    /* formats the variables by adding leading "0"s and converting to strings for display */
    function pad(val){
        var valString = val + "";
        if(valString.length < 2){
            return "0" + valString;
        }
        else{
            return valString;
        }
    }
    /***********************TIMER upload ***************/
    /* variable setup */
    var hoursLabel2 = document.getElementById("hours2");
    var minutesLabel2 = document.getElementById("minutes2");
    var secondsLabel2= document.getElementById("seconds2");
    var totalSecondd2 = 0;
    var totalMinutes2 = 0;
    var totalHours2 = 0;
    var startHours2 = 0;
    var startMinutes2 = 0;
    var startSeconds2 = 0;
    var counter2 = 0;
    var timerOn2 = 0;
    var display2 = document.getElementById("display2");
     
    /* demare le timer*/
    function startTimer2(){
        if(timerOn2 == 1){return;}
        else if(timerOn2 == 0){
            /* initialise le timer et le démare */
            Start2 = new Date();
            startHours2=Start2.getHours();
            startMinutes2=Start2.getMinutes();
            startSeconds2=Start2.getSeconds();
            timerOn2 = 1;
        }
    }
     
    function setTime2(display2){
        /* instal le timer , lit le temps, le compare a son ancienne valeur et incrémente l'horloge */
        MAJ2 = new Date();
        MAJ2.setHours((MAJ2.getHours()-startHours2),
            (MAJ2.getMinutes()-startMinutes2),
            (MAJ2.getSeconds()-startSeconds2)
        );
        totalHours2 = MAJ2.getHours();
        totalMinutes2 = MAJ2.getMinutes();
        totalSeconds2 = MAJ2.getSeconds();
        /* formate et réécrit les variable */
        secondsLabel2.innerHTML = pad2(totalSeconds);
        minutesLabel2.innerHTML = pad2(totalMinutes);
        hoursLabel2.innerHTML = pad2(totalHours);
    }
     
    /* formats the variables by adding leading "0"s and converting to strings for display */
    function pad2(val2){
        var valString2 = val2 + "";
        if(valString2.length < 2){
            return "0" + valString2;
        }
        else{
            return valString2;
        }
    }
    //-->
    et html :
    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
    <!DOCTYPE HTML>
    <html lang="fr">
    	<head> 
    		<meta charset="utf-8">
    		<title>Comparatif</title>
    		<link rel="stylesheet" type="text/css" href="style.css">
    		<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    		<script type="text/javascript" src="JS.js"></script>
     
    	</head>
    	<body> 
    		<div class="conteneur">
    			<div>
    				Téléchargement d'une vidéo Blu-ray disc (25 GB)
    				<input type="submit" value="go"id="button" width="220" height="220" onclick="startTimer();startTimer2()"> 
    				<input type="submit" value="end"id="endbutton" width="220" height="220" onclick="" > 
    			</div>
    			<div id="ADSL">
    				<div class="float">ADSL</div>
    				<div id="progress">
        				<div id="test"><p id="prog">Retrieving data...<strong >0%</strong></p></div>
        				<progress value="0" min="0" max="100"></progress>
        				<div id="display">
    						<label id="hours">00</label>:<label id="minutes">00</label>:<label id="seconds">00</label>
    					</div>
     
     
     
    				</div>
    				<div id="progress2">
     		 	  		<div id="test2"><p id="prog">Retrieving data...<strong >0%</strong></p></div>
       					<progress value="0" min="0" max="100"></progress>
     
        				<div id="display2">
    						<label id="hours2">00</label>:<label id="minutes2">00</label>:<label id="seconds2">00</label>
    					</div>
     
    				</div>
     
    			</div>
     
     
    		</div>
    	</body>
    </html>

    Je ne comprend pas ou est mon erreur (de plus ej suis totalement débutant en JS, Jquerry) si vous pouviez m'éclairer ça serait super.

  2. #2
    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 659
    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 659
    Billets dans le blog
    1
    Par défaut
    Pour ne pas que tes variables se marchent sur les pieds, il faut en déclarer de nouvelles instances avec New ...
    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 !

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

Discussions similaires

  1. [ZF 1.11] Possible d'avoir deux bootstrap différents?
    Par absot dans le forum Zend Framework
    Réponses: 1
    Dernier message: 08/12/2011, 11h42
  2. Réponses: 0
    Dernier message: 17/02/2011, 18h15
  3. [HTML 5] Comment avoir deux bouton sumbit qui envoie le formulaire dans 2 pages différentes
    Par pierrot10 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 09/03/2010, 06h54
  4. Réponses: 2
    Dernier message: 10/04/2009, 06h03
  5. Peut-on avoir deux fichier .htaccess pour 2 urlrewriting différents pour 1 même site
    Par JackBeauregard dans le forum Serveurs (Apache, IIS,...)
    Réponses: 3
    Dernier message: 30/09/2006, 08h35

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