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