Comment faire une barre de progression qui redémarre tous les x temps ?

**Dsphinx** · 20/09/2012, 13h44

Bonjour,

J'ai récupéré un code qui permet de faire un "Barre de progression" en javascript, cependant la barre se lance qu'une fois. Je souhaiterais qu'elle recommence 4x par exemple.

Voici le code :

Fichier HTML:

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
<html>
 
<head>
	<title>barre de progression</title>
	<script language="javascript" src="layerAccess.js"></script>
	<script language="javascript" src="progressBar.js"></script>
</head>
 
<body onLoad="commencer()">
	<script language="javascript"> <!--
		initProgressBar(990);
 
		var fini = true;
 
		function augmenterRegulierement () {
			if (getProgressBar() != 100) {
				setProgressBar(getProgressBar()+1);
				dispProgressBar();
				setTimeout("augmenterRegulierement()", 10);
			}
			else {
				fini = false;
			}
		}
 
		function commencer()
		{
			if (fini) {
				fini = false;
				setProgressBar(0);
				dispProgressBar();
				augmenterRegulierement();
			}			
		}
	// --> </script>
</body>
 
</html>

LayerAccess.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
var isDHTML = 0;
var isLayers = 0;
var isAll = 0;
var isID = 0;
var isBusy = false;
 
if (document.getElementById) {
	isID = 1; isDHTML = 1;
} else {
	browserVersion = parseInt(navigator.appVersion);
	if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {
		isLayers = 1; isDHTML = 1;
	} else {
		if (document.all) {
			isAll = 1; isDHTML = 1;
		}
	}
}
 
function findDOM(objectID,withStyle) {
	if (withStyle == 1) {
		if (isID) {
			return (document.getElementById(objectID).style);
		} else {
			if (isAll) {
				return (document.all[objectID].style);
			} else {
				return getObjNN4(top.document,objectID);
			}
		}
	} else {
		if (isID) {
			return (document.getElementById(objectID));
		} else {
			if (isAll) {
				return (document.all[objectID]);
			} else {
				if (isLayers) {
					return getObjNN4(top.document,objectID);
				}
			}
		}
	}
}
 
function getObjNN4(obj,name)
{
	var x = obj.layers;
	for (var i=0;i<x.length;i++)
	{
		if (x[i].id == name)
			return x[i];
		else if (x[i].layers.length)
			var tmp = getObjNN4(x[i],name);
		if (tmp) return tmp;
	}
	return null;
}
 
function writeToLayer ( id, text )
{
	// first we get a reference to the layer we want
	// to modify
	x = findDOM( id, 0 );
 
	if ( !x )
		return;
	if ( isLayers ) {
		// NS4 only allows you to have
		// one output stream open at a time
		// so if we are already writing to one
		// we will try this again in 250 ms.
		if ( isBusy ) {
			setTimeout ( "writeToLayer( '" + id + "', '" + text + "' )", 20 );
		} else {
			isBusy = true;
			// write does open for us
			x.document.write(text);
			x.document.close();
			isBusy = false;
		}
	} else {
		x.innerHTML = text;
	}
}

progressBar.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
var progressBarValue;
var progressBarWidth;
var progressBarFG = '#cccccc';
var progressBarBG = '#3d3c3f';
var progressBarBorderColor = '#000000';
var progressBarBorderWidth = 0;
 
function initProgressBar(width)
{
	setProgressBar(0);
	progressBarWidth = width;
	document.write('<div id="progressBar">here will be the progress bar</div>');
	dispProgressBar();
 
	return true;
}
 
function dispProgressBar()
{
	var html = '';
	var td1 = '';
	var td2 = '';
	var val = getProgressBar();
 
	if (val == 0) {
		td1 = '';
		td2 = '<td width="100%" align="center"></td>';
	}
	else if (val == 100) {
		td1 = '<td width="100%" bgColor="' + progressBarFG + '" align="center"></td>';
		td2 = '';
	}
	else if (val > 50) {
		td1 = '<td width="' + val + '%" bgColor="' + progressBarFG + '" align="center"></td>';
		td2 = '<td width="' + (100-val) + '%"></td>';
	}
	else {
		td1 = '<td width="' + val + '%" bgColor="' + progressBarFG + '"></td>';
		td2 = '<td width="' + (100-val) + '%" align="center"></td>';
	}
	html = '<table border="' + progressBarBorderWidth + '" ';
	html += 'width="' + progressBarWidth + '" ';
	html += 'borderColor="' + progressBarBorderColor + '" ';
	html += 'bgColor="' + progressBarBG + '" ';
	html += 'cellpadding="5" cellspacing="0">';
	html += '<tr>' + td1 + td2 + '</tr></table>';
	writeToLayer('progressBar', html);
}
 
function setProgressBar(value)
{
	if (value < 0) {
		progressBarValue = 0;
	}
	else if (value > 100) {
		progressBarValue = 100;
	}
	else {
		progressBarValue = value;
	}
	return true;
}
 
function getProgressBar()
{
	return progressBarValue;
}

Y a-t-il une bonne âme qui puisse me dire où mettre une boucle for pour que le script redémarre automatiquement ?

Merci.

**Eric2a** · 20/09/2012, 22h37

Salut,

J'ai retouché le code de manière à ce que tu puisses passer le nombre d'itérations en paramètre à la fonction commencer().

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">

Code js :

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
var
	progressBarValue,progressBarWidth,progressBarDelay,progressBarCount,progressBarElt,
	progressBarBorderWidth=0,progressBarFG='#cccccc',progressBarBG='#3d3c3f',progressBarBorderColor='#000000';
 
function dispProgressBar(){
	var html='',td1='',td2='';
 
	if(progressBarValue==0){
		td2='<td width="100%"></td>';
	}else if(progressBarValue==100){
		td1='<td width="100%" style="background-color:' +progressBarFG+ '"></td>';
	}else{
		td1='<td width="' +progressBarValue+ '%" style="background-color:' +progressBarFG+ '"></td>';
		td2='<td width="' +(100-progressBarValue)+ '%"></td>';
	}
 
	html ='<table border="' +progressBarBorderWidth+ '" ';
	html+='width="' +progressBarWidth+ '" ';
	html+='style="border-color:' +progressBarBorderColor+ ';background-color:' +progressBarBG+ '" ';
	html+='cellpadding="5" cellspacing="0">';
	html+='<tr>' +td1+td2+ '</tr></table>';
 
	progressBarElt.innerHTML=html;
}
 
function augmenterRegulierement(){
	dispProgressBar();
	progressBarValue+=1;
	if(progressBarValue>100){
		progressBarValue=0;
		progressBarCount--;
	}
	if(progressBarCount)setTimeout(augmenterRegulierement,progressBarDelay);
}
 
function commencer(width,count,delay){
	if(width>0&& count>0&& delay>0){
		progressBarElt=document.createElement('div');
		document.getElementsByTagName('body')[0].appendChild(progressBarElt);
		progressBarValue=0;
		progressBarWidth=width;
		progressBarCount=count;
		progressBarDelay=delay;
		augmenterRegulierement();
	}
}
 
window.onload=function(){
	commencer(
		900,	// Largeur en pixels
		  2,	// Itérations
		 10	// Vitesse en millisecondes
	);
};

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
</script>
</head>
<body>
</body>
</html>

**Dsphinx** · 21/09/2012, 08h43

J'ai regoupillé le tout ! et.... ça marche !

DANKE ! MERCI ! GRAZIE ! THANK YOU ! GRACIAS !

**Dsphinx** · 21/09/2012, 09h30

Par contre, cette barre va se coller contre le bord gauche de l'écran. Impossible de la mettre dans un DIV au centre de ma page.

Une idée ?

Merci !

**SPACHFR** · 21/09/2012, 09h58

Juste pour info : En HTML5

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
 
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<script type="text/javascript" language="javascript">
function progressBarSim(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al+"%";
  bar.value = al;
  al++;
var sim = setTimeout("progressBarSim("+al+")",300);
if(al == 100){
 status.innerHTML = "100%";
 bar.value = 100;
 clearTimeout(sim);
 var finalMessage = document.getElementById('finalMessage');
 finalMessage.innerHTML = "Process is complete";
}
}
var amountLoaded = 0;
progressBarSim(amountLoaded);
</script>

Comment faire une barre de progression qui redémarre tous les x temps ?

JavaScript

Discussions similaires

Partager

Partager