Fonction de Compte à rebours JS

**Magnat** · 23/04/2009, 18h09

Bonjour,

Actuellement je bloque complètement dans mon developpement à cause de JS.

J'ai trouvé et modifier un script (pour l'adapté à mon utilisation) un script de compte à rebourd à partir de secondes "time" (php).

J'ai une valeure time (par exemple un time + 2 days), et en faite le JS m'affiche les jours / heures / minutes et secondes restante en temps réel.

Il marche parfaitement, mais en solo, cad : je ne peux pas faire affiché le script 2x (ce n'est pas une fonction).

J'aimerais savoir si quelqu'un connais un script JS (je comprends le javascript mais les seuls scripts que je développe est du jQuery et je ne suis que novice), qui contient une FONCTION qui permet d'affiché un compteur sur une div et avec un time en secondes.

(ex : function compteur(div,time) { } )

Merci de votre aide.

**RomainVALERI** · 23/04/2009, 18h36

Heu... je ne suis pas sûr d'avoir compris certains passages confus mais : montre toujours ton js on t'aidera à isoler le code à mettre en fonction ^^

**Magnat** · 23/04/2009, 19h06

Bonjour,

Okay

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
 
<script language="JavaScript">
 
// la date à partir de laquelle on compte
var cible = new Date("<?php echo date("F d, Y H:i:s",$row['produit_datefin']); ?>");
// nombre de millisecondes par jour, heure, minute et seconde
var mms_jour = 24 * 60 * 60 * 1000;
var mms_heure = 60 * 60 * 1000;
var mms_minute = 60 * 1000;
var mms_seconde = 1000;
 
function decompte() {
 
// la date courante
var aujourdhui = new Date();
 
// on cr&eacute;e les variables qui accueilleront les diff&eacute;rences entre aujourd'hui et la date à atteindre
var change_j = -1;
var change_h = -1;
var change_m = -1;
 
// le total de millisecondes de diff&eacute;rences
var diff_mms = cible.getTime() - aujourdhui.getTime();
 
// pareil pour les jours
diff_jours = Math.floor(diff_mms / mms_jour);
diff_mms -= diff_jours * mms_jour;
 
// pour les heures
diff_heures = Math.floor(diff_mms / mms_heure);
diff_mms -= diff_heures * mms_heure;
 
// les... minutes, bravo ;-)
diff_minutes = Math.floor(diff_mms / mms_minute);
diff_mms -= diff_minutes * mms_minute;
 
// les secondes, ce qui reste en fait.
var diff_secondes = Math.floor(diff_mms / mms_seconde);
 
 
// on affecte nos r&eacute;sultats aux champs du formulaire
document.getElementById("jours").innerHTML = diff_jours;
document.getElementById("heures").innerHTML  = diff_heures;
document.getElementById("minutes").innerHTML  = diff_minutes;
document.getElementById("secondes").innerHTML = diff_secondes;
 
 
// on relance la fonction pour actualiser à la seconde
setTimeout("decompte()",1000);
}
</script> 
 
 
<body  onLoad="decompte()">
 
<div id="jours"></div><div id="heures"></div><div id="minutes"></div><div id="secondes"></div>

Voila, j'aimerais bien l'isoler et avoir la possibilité de donné en valeure une "ID" de div ainsi que les secondes à calculé

**andry.aime** · 24/04/2009, 07h18

Salut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function decompte(id)
{
.......
var madate;
madate=diff_jours+" "+diff_heures+" "+diff_minutes+" "+diff_secondes;
document.getElementById(id).innerHTML=madate;
....
}

**Magnat** · 24/04/2009, 12h22

Bonjour,

Merci pour ta réponse.
Mais je souhaiterais pouvoir "indiqué" le time en secondes à l'appel de la fonction ( decompte(id, time) ), comment faire?

J'ai également pas trop compris l'histoire des "..." avant et après le script. Je garde quoi de mon ancien script JS (car il faut que le temps s'actualise chaque secondes) ?

**andry.aime** · 24/04/2009, 12h59

les '...' sont les autres codes de ton script.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function decompte(id,temps)
{
.......
var madate;
madate=diff_jours+" "+diff_heures+" "+diff_minutes+" "+diff_secondes;
document.getElementById(id).innerHTML=madate;
setTimeout("decompte('id','temps')",(temps*1000));
}

temps c'est l'intervale de temps d'actualisation en seconde que tu veux mettre en paramètre.

**Magnat** · 24/04/2009, 19h11

Humm, j'ai toujours pas réussi, c'est pas manque d'avoir essayé :p

Voici mon code "trafiquer" :

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
<script language="javascript">
function decompte(id,temps)
{
// la date à partir de laquelle on compte
var cible = new Date(temps);
// nombre de millisecondes par jour, heure, minute et seconde
var mms_jour = 24 * 60 * 60 * 1000;
var mms_heure = 60 * 60 * 1000;
var mms_minute = 60 * 1000;
var mms_seconde = 1000;
 
// la date courante
var aujourdhui = new Date();
 
// on cr&eacute;e les variables qui accueilleront les diff&eacute;rences entre aujourd'hui et la date à atteindre
var change_j = -1;
var change_h = -1;
var change_m = -1;
 
// le total de millisecondes de diff&eacute;rences
var diff_mms = cible.getTime() - aujourdhui.getTime();
 
// pareil pour les jours
diff_jours = Math.floor(diff_mms / mms_jour);
diff_mms -= diff_jours * mms_jour;
 
// pour les heures
diff_heures = Math.floor(diff_mms / mms_heure);
diff_mms -= diff_heures * mms_heure;
 
// les... minutes, bravo ;-)
diff_minutes = Math.floor(diff_mms / mms_minute);
diff_mms -= diff_minutes * mms_minute;
 
// les secondes, ce qui reste en fait.
var diff_secondes = Math.floor(diff_mms / mms_seconde);	
 
 
 
var madate;
madate=diff_jours+" "+diff_heures+" "+diff_minutes+" "+diff_secondes;
document.getElementById("span#time_" + id).innerHTML=madate;
setTimeout("decompte('id','temps')",(temps*1000));
}
</script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<?php $datee = date("F d, Y H:i:s"); ?>
<script language="javascript">
decompte(<?php echo $count; ?>,<?php echo $datee; ?>); 
</script>
 
<span id="time_<?php echo $count; ?>">0</span>

**andry.aime** · 25/04/2009, 08h01

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("time_" + id).innerHTML=madate;

**Magnat** · 25/04/2009, 15h42

Bonjour,

Merci de votre réponse.
Bien vue, j'ai fait un mix entre les $.(type#id) de jquery et le JS :p !

Mais cela ne fonctionne toujours pas =( .

Rappel du code utiliser :

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
function decompte(id,temps)
{
// la date à partir de laquelle on compte
var cible = new Date(temps);
// nombre de millisecondes par jour, heure, minute et seconde
var mms_jour = 24 * 60 * 60 * 1000;
var mms_heure = 60 * 60 * 1000;
var mms_minute = 60 * 1000;
var mms_seconde = 1000;
 
// la date courante
var aujourdhui = new Date();
 
// on cr&eacute;e les variables qui accueilleront les diff&eacute;rences entre aujourd'hui et la date à atteindre
var change_j = -1;
var change_h = -1;
var change_m = -1;
 
// le total de millisecondes de diff&eacute;rences
var diff_mms = cible.getTime() - aujourdhui.getTime();
 
// pareil pour les jours
diff_jours = Math.floor(diff_mms / mms_jour);
diff_mms -= diff_jours * mms_jour;
 
// pour les heures
diff_heures = Math.floor(diff_mms / mms_heure);
diff_mms -= diff_heures * mms_heure;
 
// les... minutes, bravo ;-)
diff_minutes = Math.floor(diff_mms / mms_minute);
diff_mms -= diff_minutes * mms_minute;
 
// les secondes, ce qui reste en fait.
var diff_secondes = Math.floor(diff_mms / mms_seconde);	
 
 
 
var madate;
madate=diff_jours+" "+diff_heures+" "+diff_minutes+" "+diff_secondes;
document.getElementById("time_" + id).innerHTML=madate;
setTimeout("decompte('id','temps')",(temps*1000));
}

Puis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<script language="javascript">
<?php $datee = date("F d, Y H:i:s"); ?>
decompte(<?php echo $count; ?>,<?php echo $datee; ?>); // Feb 4 19:20:00:2003   Mois jour h:min:sec annee
</script><span id=time_<?php echo $id; ?>>x</span>

J'ai tester l'id, elle est correctement attribué.

**andry.aime** · 25/04/2009, 15h49

J'ai mis la paramètre temps pour la durée de rafraichissement en seconde et non pour une date donnée. Tu dois ajouter une autre paramètre pour affecter à la variable cible.

**Magnat** · 25/04/2009, 20h00

Bonjour,

à ce que j'ai compris, c'est donc plutot :

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
function decompte(id,time,temps)
{
// la date à partir de laquelle on compte
var cible = new Date(time);
// nombre de millisecondes par jour, heure, minute et seconde
var mms_jour = 24 * 60 * 60 * 1000;
var mms_heure = 60 * 60 * 1000;
var mms_minute = 60 * 1000;
var mms_seconde = 1000;
 
// la date courante
var aujourdhui = new Date();
 
// on cr&eacute;e les variables qui accueilleront les diff&eacute;rences entre aujourd'hui et la date à atteindre
var change_j = -1;
var change_h = -1;
var change_m = -1;
 
// le total de millisecondes de diff&eacute;rences
var diff_mms = cible.getTime() - aujourdhui.getTime();
 
// pareil pour les jours
diff_jours = Math.floor(diff_mms / mms_jour);
diff_mms -= diff_jours * mms_jour;
 
// pour les heures
diff_heures = Math.floor(diff_mms / mms_heure);
diff_mms -= diff_heures * mms_heure;
 
// les... minutes, bravo ;-)
diff_minutes = Math.floor(diff_mms / mms_minute);
diff_mms -= diff_minutes * mms_minute;
 
// les secondes, ce qui reste en fait.
var diff_secondes = Math.floor(diff_mms / mms_seconde);	
 
 
 
var madate;
madate=diff_jours+" "+diff_heures+" "+diff_minutes+" "+diff_secondes;
document.getElementById("time_" + id).innerHTML=madate;
setTimeout("decompte('id','temps')",(temps*1000));
}

J'ai modifier également mon code d'appel, mais toujours rien =(

**andry.aime** · 27/04/2009, 08h40

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setTimeout("decompte('id','time','temps')",(temps*1000));

Tu peut voir un POST résolue sur.
http://www.developpez.net/forums/d69...ompte-rebours/

Fonction de Compte à rebours JS

JavaScript

Discussions similaires

Partager

Partager