Fonction de Compte à rebours JS

Version imprimable

23/04/2009, 18h09
Magnat

Fonction de Compte à rebours JS

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.
23/04/2009, 18h36
RomainVALERI

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

Bonjour,

Okay :)

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

Salut

Code:

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;
....
}

24/04/2009, 12h22
Magnat

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

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

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.

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

Voici mon code "trafiquer" :

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

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>

25/04/2009, 08h01
andry.aime

Code:

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

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:

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:

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

25/04/2009, 15h49
andry.aime

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.

Bonjour,

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

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
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 =(

27/04/2009, 08h40
andry.aime

Code:

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

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