compte � rebours en javascript ?

**cFranssen** · 19/09/2010, 20h08

bonjour, voici mon code actuelle:
dans head:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**vermine** · 20/09/2010, 07h30

Bonjour,

1) Appelez la fonction dans le onload du body:

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

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

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

var mon_timer;

Et ensuite, initialisez-le ainsi:

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

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

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

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

clearInterval(mon_timer);

**cFranssen** · 20/09/2010, 09h53

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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>

**vermine** · 20/09/2010, 12h16

De toute fa�on je m'�tais tromp�.

Voici le code Javascript. J'ai mis en commentaire les diff�rents points importants :

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

C'est du HTML. C'est la balise <body> :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**SpaceFrog** · 20/09/2010, 13h04

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

a priori le param�tre est un integer pas un string

**cFranssen** · 20/09/2010, 13h27

re, le code ne fonctionne toujours pas

**vermine** · 20/09/2010, 13h41

J'ai oubli� un petit truc :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**cFranssen** · 20/09/2010, 14h34

j'avais d�j� vu cette petite erreur mais m�me �a, �a ne fonctionne pas:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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>

**SpaceFrog** · 20/09/2010, 14h40

Encore faut il attribuer la value au bouton ...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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>

**cFranssen** · 20/09/2010, 14h58

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 ?

**vermine** · 20/09/2010, 15h01

Vous pouvez utiliser par exemple un span :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

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

**cFranssen** · 20/09/2010, 15h21

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**vermine** · 20/09/2010, 15h24

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Pour que le d�compte s'arr�te, ajouter un clearTimer dans le else de votre fonction start.

**cFranssen** · 20/09/2010, 15h58

j'ai supprimer les 2

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<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

**SpaceFrog** · 20/09/2010, 16h26

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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>

**cFranssen** · 20/09/2010, 16h40

MERCI

mtn commen je fais pour que quand le temps arrive a 0, le bouton "ench�rir" ne soit plus actif ?

**SpaceFrog** · 20/09/2010, 16h52

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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>

**ABCIWEB** · 20/09/2010, 17h31

@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.

**cFranssen** · 20/09/2010, 18h20

ahbon !!! que faut il utiliser alors ?

**Bovino** · 20/09/2010, 20h15

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

compte � rebours en javascript ?

JavaScript

Discussions similaires

Partager

Partager