Discussion :

[tryan]

Bonjour,

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

Soit la fonction suivante :

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
 
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

[SpaceFrog]

setInterval ou setTimeout sont les pistes a suivre

[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 .

Dois lancer le SetInterval dans la fonction elle même ou lors du onclick?

[Bovino]

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...

[tryan]

Ne pas crier ni taper svp

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
 
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+" % ";
	}
}

[tryan]

Autre teste toujours sans succès :

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
 
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);