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