Afficher la valeur d'un pourcentage graduellement?

Version imprimable

Bonjour,

Le titre est pas génial mais je n'ai pas trouvé mieux !

Soit la fonction suivante :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function rempli(){ //valeur saisie var niveau = document.getElementById("jauge").value; if(niveau>100){ alert('Le niveau ne peut être supérieure à 100!'); return false; } //on divise la hauteur de la cuve par 100 que l'on multiplie par la valeur saisie var total = (500/100)*niveau; var color = document.getElementById("contenu"); //on attribue une couleur de fond color.style.background='red'; //on donne une hauteur à la couleur de fond color.style.height=total; //on affiche le résultat en % if(niveau != ''){ color.innerHTML=(total/10)*2+" % "; } }
Cette fonction me permet d'afficher une jauge avec le pourcentage.
Ce que j'aimerais réussir, c'est d'afficher la valeur du pourcentage graduellement. Actuellement si je saisie le chiffre 50, le chiffre 50 s'affiche directement (normal) alors que je souhaiterais que ça affiche de 0 jusqu'à 50 successivement. J'ai testé plein d'intégration (boucle for, while, setInterval,etc..) mais je dois m'y prendre comme un manche et j'aimerais bien un petit coup de main.

Ceci dit, c'est juste pour ma compréhension perso., je débute en Javascript.

Merci

29/11/2012, 16h03
SpaceFrog

setInterval ou setTimeout sont les pistes a suivre
29/11/2012, 16h39
tryan

Comme dit dans mon poste, j'ai testé setInterval et j'ai du certainement m'y'prendre comme un manche. Sans être obligé de me donner la solution complète, un début de code serait bienvenue parce que la je sèche complètement :calim2: .

Dois lancer le SetInterval dans la fonction elle même ou lors du onclick?
29/11/2012, 16h43
Bovino

Citation:

j'ai testé setInterval et j'ai du certainement m'y'prendre comme un manche

Ben montre-nous ce que tu as testé et on pourra te dire ce qui ne va pas...

Ne pas crier ni taper svp :mrgreen:

Code:

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
 
var compte = 0;
function lance_fonction()
{
  compte = setInterval(rempli, 100);
}
function rempli(){
	//valeur saisie
	var niveau = document.getElementById("jauge").value;
	if(niveau>100){
		alert('Le niveau ne peut être supérieure à 100!');
		return false;
	}
	//on divise la hauteur de la cuve par 100 que l'on multiplie par la valeur saisie
	var total = (500/100)*niveau;
	var color = document.getElementById("contenu");
	//on attribue une couleur de fond
	color.style.background='red';
	//on donne une hauteur à la couleur de fond
	color.style.height=total;
	compte += 1;
	//on affiche le résultat en %
	if(niveau != ''){
	color.innerHTML=compte+" % ";
	}
}

Autre teste toujours sans succès :mur::

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
function rempli(){
	//valeur saisie
	var niveau = document.getElementById("jauge").value;
	if(niveau>100){
		alert('Le niveau ne peut être supérieure à 100!');
		return false;
	}
	//on divise la hauteur de la cuve par 100 que l'on multiplie par la valeur saisie
	var total = (500/100)*niveau;
	var color = document.getElementById("contenu");
	//on attribue une couleur de fond
	color.style.background='red';
	//on donne une hauteur à la couleur de fond
	color.style.height=total;
 
	//on affiche le résultat en %
	for(compte=0;compte<=niveau;compte++){
	color.innerHTML=compte+" % ";
	}
}
setInterval("rempli()",100);

:help:

29/11/2012, 18h41
NoSmoking
Bonjour,
Code:

1 2 3 var compte = 0; // et plus loin compte = setInterval(rempli, 100);
si setInterval te retourne 164578 ton compteur commence mal

Mince trompé de bouton :oops:

Tu incrémentes niveau où ???

Citation:

Envoyé par NoSmoking

Bonjour,
Tu incrémentes niveau où ???

La est le soucis car je tâtonne et j'y vais un peu au pif. Je pensais qu'elle se serait incrémenté dans la boucle "for" mais visiblement je pense de travers :? . Tout ce que je tente foire à chaque fois ... je reprendrais demain.

Si vous pouviez me donner un indice (pas tout le code) sur ma fonction de départ, ça m'aiderait beaucoup :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function rempli(){ //valeur saisie var niveau = document.getElementById("jauge").value; if(niveau>100){ alert('Le niveau ne peut être supérieure à 100!'); return false; } //on divise la hauteur de la cuve par 100 que l'on multiplie par la valeur saisie var total = (500/100)*niveau; var color = document.getElementById("contenu"); //on attribue une couleur de fond color.style.background='red'; //on donne une hauteur à la couleur de fond color.style.height=total; //on affiche le résultat en % if(niveau != ''){ color.innerHTML=(total/10)*2+" % "; } }
Evidemment si ma fonction vous semble complètement pourrit, autant me le dire également 8O .

29/11/2012, 21h32
SylvainPV

Si le but est de dessiner une jauge, tu peux utiliser les transitions CSS :
http://jsfiddle.net/xquxZ/1/

Sinon la version timeout :
http://jsfiddle.net/xquxZ/2/
30/11/2012, 17h34
tryan

Oui le but est bien de dessiner une jauge et je ne m'attendais à avoir le travail mâché autant, merci :ccool:. J'aurais eu beaucoup de mal à trouvé par moi même ce résultat.

En passant, pourquoi le code http://jsfiddle.net/xquxZ/2/ ne fonctionne pas sous Firefox (le pourcentage)?
30/11/2012, 19h02
SylvainPV

http://www.quirksmode.org/dom/w3c_html.html

Firefox ne supporte pas .innerText ; il faut utiliser .textContent

.textContent est la propriété "standard", tandis que .innerText fonctionnait à l'origine seulement sur IE. J'ai toujours préféré la syntaxe .innerText pour faire le parallèle avec .innerHTML ; pour une fois je préfère les choix d'IE, et Firefox joue le vilain canard à refuser d'implémenter cet alias.
01/12/2012, 09h05
tryan

Merci beaucoup pour toutes vos explications :ccool: .