compte à rebours en javascript ?

Version imprimable

bonjour, voici mon code actuelle:
dans head:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type="text/javascript"> function start(duree) { var o=document.getElementById("box" ); if(duree >= 0) { o.value = duree; setTimeout("start("+duree+"-1)", 1000); } else { o.value ="Vendu !!!"; } } </script>
et dans body:

Code:

<input type="button" id="box" height="5"/><br><input type="button" onclick="javascript:start('3')" value="encherir!" />

2 question:
1 : Que faut il mettre pour afficher le compte a rebour directement sur la page (à la place de button)

2: que faut il faire pour que mon compte a rebour recommance chaque fois que je pousse sur le bouton "encherir!" ? actuelement, il chaque fois que je clic sur le bouton, il commence un nouveau décompte mais continue les anciens donc après quelque clic, il n'y a plus que des chiffres qui défiles sans aucun sens.

désoler pour mes explications incompréhensible mais je ne sais pas comment le dire autrement donc si vous ne comprenez pas je vous invite a le tester.

merci (c'est pour un projet scolaire)

20/09/2010, 07h30
vermine

Bonjour,

1) Appelez la fonction dans le onload du body:

Code:

<body onload="start('3');">

2) Tout d'abord, déclarez votre timer en global:

Code:

var mon_timer;

Et ensuite, initialisez-le ainsi:

Code:

mon_timer = setTimeout("start("+duree+"-1)", 1000);

Finalement, commencez votre fonction par un clear du timer avant de le relancer:

Code:

clearInterval(mon_timer);

re, je m'excuse mais je n'ai jamais fais de javascript donc je ne sais pas quoi mettre où

j'ai fait ça mais ça ne fonctionne pas:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script type="text/javascript"> <body onload="start('3');"> function start(duree) { clearInterval(mon_timer); var mon_timer; mon_timer = setTimeout("start("+duree+"-1)", 1000); if(duree >= 0) { o.value = duree; setTimeout("start("+duree+"-1)", 1000); } else { o.value ="Vendu !!!"; } } </script>

De toute façon je m'étais trompé. :P

Voici le code Javascript. J'ai mis en commentaire les différents points importants :
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 27 <script type="text/javascript"> //Déclaration d'une variable globale qui pourra être utilisée dans toute la page var mon_timer; function start(duree) { if(duree >= 0) { o.value = duree; //Démarrage du timer mon_timer = setTimeout("start("+duree+"-1)", 1000); } else { o.value ="Vendu !!!"; } } function restart(duree) { //Nettoyage du timer clearInterval(mon_timer); //Démarrage d'un nouveau timer start(duree); </script>
Pour ce qui est de ceci :
Code:

1 2 <body onload="start('3');">
C'est du HTML. C'est la balise <body> :
Code:

1 2 3 4 5 6 7 8 <html> <head> </head> <body onload="start('3');"> <input type="button" id="box" height="5"/><br><input type="button" onclick="restart('3')" value="encherir!" /> </body> </html>
J'ai ajouté la fonction restart et c'est elle qui s'occupera de nettoyer le timer avant de le redémarrer. Je l'appel donc sur le bouton "encherir!" à la place de la fonction start. ;)

20/09/2010, 13h04
SpaceFrog

Code:

<body onload="start(3);">

a priori le paramètre est un integer pas un string
20/09/2010, 13h27
cFranssen

re, le code ne fonctionne toujours pas :(

J'ai oublié un petit truc :
Code:

1 2 3 4 5 6 7 8 9 10 function restart(duree) { //Nettoyage du timer clearInterval(mon_timer); //Démarrage d'un nouveau timer start(duree); } </script>
Sinon montrez-nous tout votre code alors.
;)

j'avais déjà vu cette petite erreur mais même ça, ça ne fonctionne pas:

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
27
28
29
30
31
32
33
34
35
36
<html>
<head>
 
<script type="text/javascript">
//Déclaration d'une variable globale qui pourra être utilisée dans toute la page
var mon_timer;
 
function start(duree)
{
   if(duree >= 0)
   {
       o.value = duree;
       //Démarrage du timer
       mon_timer = setTimeout("start("+duree+"-1)", 1000);
   }
   else
   {
       o.value ="Vendu !!!";
   }
}
 
function restart(duree)
{
   //Nettoyage du timer
   clearInterval(mon_timer);
 
   //Démarrage d'un nouveau timer
   start(duree);
}
</script>
 
</head>
<body onload="start('3');">
   <input type="button" id="box" height="5"/><br><input type="button" onclick="restart('3')" value="encherir!" />
</body>
</html>

Encore faut il attribuer la value au bouton ...

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
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
 
<script type="text/javascript">
//Déclaration d'une variable globale qui pourra être utilisée dans toute la page
var mon_timer;
 
function start(duree)
{
o=document.getElementById('box')
   if(duree >= 0)
   {
       o.value = duree;
       //Démarrage du timer
       mon_timer = setTimeout(function(){start(duree-1)}, 1000);
   }
   else
   {
       o.value ="Vendu !!!";
   }
}
 
function restart(duree)
{
   //Nettoyage du timer
   clearInterval(mon_timer);
 
   //Démarrage d'un nouveau timer
   start(duree);
}
</script>
 
</head>
<body onload="start(3);">
   <input type="button" id="box" height="5" value=""/><br><input type="button" onclick="restart(3)" value="encherir!" />
</body>
</html>

20/09/2010, 14h58
cFranssen

lol la bête faute !!! ça fonctionne mtn mais que faut il mettre à la place de button pour que les chiffres s'affiche directement sur ma page ? et plus dans un bouton ou dans une zone texte ?
20/09/2010, 15h01
vermine

Vous pouvez utiliser par exemple un span :

Code:

<span id="box"></span>

en remplaçant les "o.value =" par des "o.innerHTML =".

merci, encore une chose que faut-il faire pour avoir plusieur décompte sur la même page ?

j'ai fait ça mais c'est peut-être bête et ça ne fonctionne pas :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
<head>
 
<script type="text/javascript">
//Déclaration d'une variable globale qui pourra être utilisée dans toute la page
var mon_timer;
 
function start1(duree1)
{
o=document.getElementById('box1')
   if(duree1 >= 0)
   {
       o.innerHTML =duree1;
       //Démarrage du timer
       mon_timer = setTimeout(function(){start1(duree1-1)}, 1000);
   }
   else
   {
       o.innerHTML ="Vendu !!!";
   }
}
 
function restart1(duree1)
{
   //Nettoyage du timer
   clearInterval(mon_timer);
 
   //Démarrage d'un nouveau timer
   start1(duree1);
}
 
var mon_timer2;
 
function start2(duree2)
{
o=document.getElementById('box2')
   if(duree2 >= 0)
   {
       o.innerHTML =duree2;
       //Démarrage du timer
       mon_timer2 = setTimeout(function(){star2(duree2-1)}, 1000);
   }
   else
   {
       o.innerHTML ="Vendu !!!";
   }
}
 
function restart2(duree2)
{
   //Nettoyage du timer
   clearInterval(mon_timer2);
 
   //Démarrage d'un nouveau timer
   start2(duree2);
}
 
 
 
</script>
 
</head>
<body onload="start1(30);">
   <span id="box1"></span><br><input type="button" onclick="restart1(30)" value="encherir!" /><br>
<body onload="start2(30);">
   <span id="box2"></span><br><input type="button" onclick="restart2(30)" value="encherir!" />
</body>
</html>

et j'aimerais aussi que le décompte ne commence pas avant qu'on pousse sur le bouton (la première fois) et si possible, quand il arrive a 0 que le bouton devienne innactif.

merci

20/09/2010, 15h24
vermine

Il y a sûrement moyen de modifier les fonctions pour ne pas dupliquer le code mais en attendant, vous ne pouvez avoir qu'un seul body. Supprimer cette-ligne-ci et ça répondra aussi à votre avant dernière question:

Code:

<body onload="start2(30);">

Pour que le décompte s'arrête, ajouter un clearTimer dans le else de votre fonction start.
20/09/2010, 15h58
cFranssen

j'ai supprimer les 2

Code:

<body onload="start2(30);">

ce qui me permet de ne pas démarer le décompte avant qu'on pousse sur le bouton mais je ne sais toujour pas comment fair plusieur décompte simultanés

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
 
<script type="text/javascript">
//Déclaration d'une variable globale qui pourra être utilisée dans toute la page
var mon_timer = new Array();
 
function start(duree,objid)
{
this.obj=document.getElementById('box'+objid)
this.duree=duree
   if(this.duree >= 0)
   {
       this.obj.innerHTML = duree;
       //Démarrage du timer
       mon_timer[objid] = setTimeout(function(){new start(duree-1,objid)}, 1000);
   }
   else
   {
       this.obj.innerHTML ="Vendu !!!";
   }
}
 
function restart(duree,objid)
{
   //Nettoyage du timer
   clearInterval(mon_timer[objid]);
 
   //Démarrage d'un nouveau timer
   new start(duree,objid);
}
 
function launch(duree,objid){
 
}
 
 
</script>
 
</head>
<body onload="start(3,'_1');">
   <span id="box_1" ></span><br><input id="_1" type="button" onclick="restart(3,this.id)" value="encherir!" /><br/><br/>
   <span id="box_2" ></span><br><input id="_2" type="button" onclick="restart(3,this.id)" value="encherir!" /><br/><br/>
   <span id="box_3" ></span><br><input id="_3" type="button" onclick="restart(10,this.id)" value="encherir!" /><br/><br/>
   <span id="box_4" ></span><br><input id="_4" type="button" onclick="restart(6,this.id)" value="encherir!" /><br/><br/>
   <span id="box_5" ></span><br><input id="_5" type="button" onclick="restart(3,this.id)" value="encherir!" /><br/><br/>
</body>
</html>

20/09/2010, 16h40
cFranssen

MERCI :mrgreen: :ccool: mtn commen je fais pour que quand le temps arrive a 0, le bouton "enchérir" ne soit plus actif ?

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
27
28
29
30
31
32
33
34
35
36
37
<script type="text/javascript">
//Déclaration d'une variable globale qui pourra être utilisée dans toute la page
var mon_timer = new Array();
 
function start(duree,objid)
{
this.obj=document.getElementById('box'+objid)
this.duree=duree
   if(this.duree >= 0)
   {
       this.obj.innerHTML = duree;
       //Démarrage du timer
       mon_timer[objid] = setTimeout(function(){new start(duree-1,objid)}, 1000);
       document.getElementById(objid).disabled=true;
   }
   else
   {
       this.obj.innerHTML ="Vendu !!!";
        document.getElementById(objid).disabled=false;
   }
}
 
function restart(duree,objid)
{
   //Nettoyage du timer
   clearInterval(mon_timer[objid]);
 
   //Démarrage d'un nouveau timer
   new start(duree,objid);
}
 
function launch(duree,objid){
 
}
 
 
</script>

20/09/2010, 17h31
ABCIWEB

@cFranssen

Pour info :

A savoir que cette méthode est approximative. Utiliser setTimeout toutes les secondes ne donnera pas la même cadence sur tous les navigateurs. Certains verront défiler les secondes plus vite que d'autres suivant leur navigateur.
20/09/2010, 18h20
cFranssen

ahbon !!! que faut il utiliser alors ?

Citation:

Envoyé par ABCIWEB

@cFranssen

Pour info :

A savoir que cette méthode est approximative. Utiliser setTimeout toutes les secondes ne donnera pas la même cadence sur tous les navigateurs. Certains verront défiler les secondes plus vite que d'autres suivant leur navigateur.

:?

Sans dire que les timers JavaScript puissent être considérés comme infaillibles, leur fiabilité pour des durées supérieures à 25ms peut être considérée comme plutôt satisfaisante :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var debut = new Date(); var i = 0; var timer = setInterval(function(){ if(i==100){ clearInterval(timer); } else{ var tmp = new Date(); console.log(tmp-debut); debut = tmp; i++; } },1000);

20/09/2010, 20h48
SpaceFrog

la question n'est pas tant la fiabilité sur quelques pouillèmes de secondes, que la synchronisation entre plusieurs utilisateurs connecté simultanément, sans oublier le fait qu'étant codé en js on peut tout à fait modifier ou bloquer le compteur.

Le mieux serait d'ajaxer la synchronisation, le temps de référence étant coté serveur ...
20/09/2010, 20h56
Bovino

:mouarf:

T'as raison Spaffy ! J'avais pas vu que c'était dans un contexte d'enchères :mrgreen:

Du coup cFranssen, sans vouloir être méchant, vues les questions que tu poses, je te conseillerais de te perfectionner en développement Web (en particulier langage serveur et JavaScript) avant de te lancer dans un tel projet...
20/09/2010, 21h10
cFranssen

pour info, j'ai 16 ans, c'est juste pour m'amuser et surtout apprendre !! je touche a tout

Citation:

Envoyé par cFranssen

pour info, j'ai 16 ans, c'est juste pour m'amuser et surtout apprendre !! je touche a tout

Oui disons que ça pourrait servir pour un jeu sans enjeu :)

Sinon concernant le setTimeout il est vrai que tant qu'on indique pas des temps très courts on obtient des résultats plutôt satisfaisants.

Mais cela peut varier suivant la charge du navigateur. Par exemple ce test dans Firefox 3.6.10 :
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript">  </script> </head> <body onload="decompte()"> SetTimeout <input type="text" id="valeur_temoin" name="affichage" /> Valeur machine <input type="text" id="valeur_temps" name="valeur_temps" /> </body> </html>
Si tu laisse tourner ce test un bon quart d'heure (environ 1000 cycles) avec une seule fenêtre et un seul onglet d'ouvert dans ton navigateur tu ne trouveras certainement pas plus d'une seconde d'écart.

Par contre si tu ouvres beaucoup d'onglets (pour voir d'autre sites) dans la même fenêtre pendant que le test se déroule tu pourras constater plusieurs secondes de retard - 5 à 10 ou plus suivant le nombre d'onglets d'ouverts - toujours pour un quart d'heure de test. Cela ne dépend pas que du nombre d'onglets d'ouverts mais aussi de la sollicitation des sites en cours de consultations etc.

Voilà, c'était juste pour mettre des chiffres sur les mots :)

21/09/2010, 07h57
cFranssen

et comment on fait pour se référer au temps du serveur ?
21/09/2010, 08h22
SpaceFrog

tu auras forcément un décalage dû au temps de connection mais il faut passer par ajax...
21/09/2010, 09h28
cFranssen

et comment font ils alors sur les VRAI sites d'enchères comme ebay, bidyez, bidwin, ...
21/09/2010, 11h01
SpaceFrog

une synchro de l'heure entre client et serveur sacahnt que de toute façon l'heure de référence est celle du serveur, ainsin même si tu bidouille le chrono coté client, le serveur saura le detecter ...
21/09/2010, 12h03
cFranssen

ok, merci a tous