Snsega89 a écrit:

Bonjour tout le monde,

Voilà je suis pas un grand fan du JS mais faut croire qu'on a pas trop le choix, en plus depuis deux mois ça me sauve vraiment les miches.

Aujourd'hui je dois faire une barre de progression, celle ci doit s'incrémenter d'une certaine valeur à chaque fois qu'il y a un validation par bouton. J'en avais utilisé un autre qui devait juste se remplir, et je ne vois pas comment faire pour qu'à chaque click, la barre s'incrémente d'une valeur définie, c'est pour celà que je sollicite votre aide.


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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>Test Progess Bar</title>
		<link rel="stylesheet" href="progressbar.css" type="text/css" media="screen" title="no title" charset="utf-8" />
		<script src="progressbar.js" type="text/javascript"></script>  
 
	</head>
	<body>
	<div id="asg">  
		<div id="progressbar">
			<div id="indicator"></div>
			</div>
		<div id="progressnum">0</div>
	</div>
	<input type="button" name="Submit" value="Lancer la progression" onclick="itv = setInterval(prog, 100)" />
	<input type="button" name="Submit" value="Stopper" onclick="clearInterval(itv)" />
	</body>
</html>

Le CSS :

Code css : 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
#asg{
  background-color:lightgray;
  width:254px;
  padding:2px;
  -moz-border-radius:3px;
  border-radius:3px;
  text-align:left;
  border:1px solid gray;	
}
#progressbar{
  width:250px;
  padding:1px;
  background-color:white;
  border:1px solid black;
  height:28px;
}
#indicator{
  width:0px;
  background-image:url("shaded-green.png");
  height:28px;
  margin:0;
}
#progressnum{
  text-align:center;
  width:250px;
}

et le 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
var maxprogress = 250;   // total à atteindre
var actualprogress = 0;  // valeur courante
var itv = 0;  // id pour setinterval
function prog()
{
  if(actualprogress >= maxprogress) 
  {
    clearInterval(itv);   	
    return;
  }	
  var progressnum = document.getElementById("progressnum");
  var indicator = document.getElementById("indicator");
  actualprogress += 1;	
  indicator.style.width=actualprogress + "px";
  progressnum.innerHTML = actualprogress;
  if(actualprogress == maxprogress) clearInterval(itv);   
}

Merci à tous.