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.