11486 sujets

JavaScript, DOM et API Web HTML5

Compteur en Javascript

Bonjour,

pour mon premier post dans ce forum (qui me donne tout un tas de réponses), je vais poser une question dont je ne trouve la réponse nulle part. J'ai peut-être mal cherché aussi Smiley sweatdrop

Je veux faire plusieurs compteurs sur une page HTML. Pour un, j'y arrive, aucun problème. Mais pour un nombre indéfini, je ne trouve pas de solution simple.

Après divers tatonement, j'en arrive à cet affreux code qui ne fait rien :
<html>
<head>
<title>Test de décompte</title>
<script>

	function counter(elId, count) {
		var counterSpan = document.getElementById(elId);
		var count = count;
		doCount(this);
	}
		
	function doCount(counter) {
		if (counter.count == 0) {
			// do something
		} else {
			counter.counterSpan.innerHTML = counter.count;
			counter.count --;
			setTimeout(createDoCountFunct(counter),1000);
		}
	}
	
	counter.prototype.doCount = doCount;
	
	function createDoCountFunct(counter) {
		return function() {counter.doCount();};
	}
	
	
	// -------
	

	window.onload = function() {
		counter('c1',100);
		counter('c2',10);
	}
	

	
	
	
</script>
</head>
<body>
Décompte 1 : <span id="c1">x</span><br>
Décompte 2 : <span id="c2">x</span>
</body>
</html>


Si quelqu'un peut m'aider, je lui en serais gré. Smiley cligne
Si vous voulez plus d'explication, n'hésitez pas à me poser des questions.

mahU
un exemple peut-être un peu lointain?
à charger si le coeur t'en dit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>


<style type="text/css">



</style>

</head>
<body>


<div id="cadre">
	<div>10</div>
	<div>73</div>
	<div>25</div>
	<div>13</div>
	<div>3</div>
</div>

<script type="text/javascript">


function go(noeud,fin,vitesse){

	var debut=noeud.firstChild.data;
	var timer;
	this.chrono=chrono();

	function chrono(){
		if(debut<fin){
			debut++;
			noeud.firstChild.data=debut;
			timer=setTimeout(chrono,vitesse)
		}
		else{
			clearTimeout(timer)
		}
	}
}


window.onload=function(){
	var c=document.getElementById("cadre").getElementsByTagName("div");

	for(j=0;j<c.length;j++){
		new go(c[j],150,Math.ceil(Math.random()*500))
	}
}

</script>


</body>
</html>
Merci javatwister, malgré le code affreux que je fais, il n'était pas très loin de ce que je voulais.

c'était le :
this.chrono=chrono();

qui me manquait.

Donc le code final ressemblera à un truc comme ça :
<html>
	<head>
		<title>Test de décompte</title>
		<script type="text/javascript">
		<!--
	function Counter(elId, index, speed, callback){
		var counterSpan = document.getElementById(elId);
		var timer;
		this.doCount=doCount();
	
		function doCount(){
			if (index <= 0) {
				clearTimeout(timer);
				callback(this);
			} else {
				counterSpan.innerHTML = index;
				index --;
				setTimeout(doCount, speed);
			}		
		}

	}
	
	window.onload=function(){
		new Counter('c1', 5, 500, counterCallBack);
		new Counter('c2', 10, 1000, counterCallBack);
	}
	
	function counterCallBack(counter) {
		counter.counterSpan.innerHTML = "<strong>Fini !</strong>";
	}
	
		// -->
		</script>
	</head>
	<body>
		Décompte 1 : <span id="c1">x</span><br>
		Décompte 2 : <span id="c2">x</span>
	</body>
</html>


Par contre, je sais si je dois poser la question à ce même endroit ou à un autre, mais j'ai des problèmes avec le callback. Pas qu'il n'est pas appelé, mais je ne sais pas comment passé l'objet Counter en paramètre.

@ QuentinC
Vu comme ca, ca sert à rien, mais j'avais besoin de faire des tests sur des objets incluant des timer et un callback, mais le premier exemple décomptait des secondes Smiley lol

Sinon, en analysant le code, j'ai 2 questions :
- l'interet du new, vu que ca fait la même chose (sous FF) ?
- quel interet de faire un clearTimeout(timer) vu que le timer a terminé de "compter" ?

Merci encore d'avance.
mahU
salut

pour le new, il est facultatif ici parce que le prototype appelle une méthode qui "fait partie de sa définition"; mais essaie d'invoquer une méthode prototypée par exemple et new redevient indispensable;

pour clearTimeout, t'as raison aussi Smiley langue c'est juste une sale manie histoire d'arrêter proprement le timer;

après, je comprends ton problème pour invoquer l'objet de l'intérieur d'une méthode; après que doCount a été rappelée une fois, "this" n'est plus l'objet counter attendu...

alors personnellement, j'utilise souvent une méthode sale et efficace: j'insère chaque objet créé dans un bête tableau et j'appelle l'indice de ce tableau quand j'ai besoin de rappeler l'objet;

j
Sujet clos
Aller à