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

Fermé
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 - 31 mars 2013 à 14:01
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 1 avril 2013 à 01:04
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 dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 1/04/2013 à 01:06
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