Avoir deux chrono différents

**isiodith** · 27/02/2014, 16h29

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>