compte à rebours en javascript ?

Version imprimable

Voir 40 message(s) de cette discussion en une page

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

Voir 40 message(s) de cette discussion en une page