Problème scripte incrément variable via timer ne marche pas

danwolf7 Messages postés 54 Date d'inscription   Statut Membre Dernière intervention   -  
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J'essaye en vain de réaliser un scripte pour que la valeur d'une variable grandisse avec le temps en vue de réaliser une animation par la suite.

Voici mon code :
<script>
function auskunft(){
	zahl=0;
	function addition(){
		zahl=zahl+10;
	}
	var timer = setInterval(function() {addition()}, 100);
	setTimeout(function() {clearInterval(timer)}, 1000);
	document.getElementById("auskunft").innerHTML=zahl;
}
</script>
<div id="auskunft" style="position:absolute; left:30px; top:30px; background-color:rgba(0,0,0,0.8); padding:10px; color:#FFF" onmouseover="auskunft();">Ausfunft</div>


Mais voilà mon code ne marche pas et je ne comprends pas pourquoi.
Le but de ce code est que la variable zahl , exprimée grâce à innerHTML, gagne +10 tous les 100ms pendant 1000ms pour faire comme une sorte de chargement qui passe de 0 à 100.

Auriez-vous une idée quant à la résolution de ce problème ?
A voir également:

1 réponse

prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Hello,

Si tu utilises le code que je t'ai modifié, il faut faire un petit test pour voir si le timer est déjà setté, sinon lors de multiples survols durant la même seconde le timer se duplique et le résultat n'est plus bon. Je te laisse chercher un peu, et je te le ferai si tu ne trouves pas comment faire.

<html> 
<head> 
 <title></title> 
</head> 
<body> 
 <div id="auskunft" style="position:absolute; left:30px; top:30px; background-color:rgba(0,0,0,0.8); padding:10px; color:#FFF" onmouseover="auskunft();">Ausfunft</div> 
 <script> 
 var zahl = 0; 
 var timer = null; 

 function addition(){ 
  zahl=zahl+10; 
  document.getElementById("auskunft").innerHTML=zahl; 
 } 

 function auskunft(){ 
  timer = setInterval(function() {addition()}, 100); 
  setTimeout(function() {clearInterval(timer)}, 1100); 
 } 
 </script> 
</body> 
</html> 
0