Sujet Précédent Sujet Suivant

Compte à rebours

wadpap13 Messages postés 67 Date d'inscription mercredi 14 février 2007 Statut Membre Dernière intervention 22 mars 2009 - 29 mai 2008 à 13:09
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 - 30 mai 2008 à 16:04
Bonjour,

J'ai un soucis avec mon compte à rebours dynamique. Il affche l'heure coté client et j'aimerais avoir un compte à rebours avec l'heure coté serveur.

Donc dans mon code j'ai remplacé :
var aujourdhui new Date();  par var aujourdhui new Date(<?=date('Y,m-1,d,H,i,s')?>);

Donc ca marche bien, il le fait bien avec l'heure coté serveur, mais le compteur reste figé si on ne recharge pas la page, il n'est plus dynamique.

Pour info, voici mon code :

// 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(<?=date('Y,m-1,d,H,i,s')?>);


// on crée les variables qui accueilleront les diffé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é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;
if(diff_heures<10){
 diff_heures="0"+diff_heures;
 }


// les... minutes, bravo ;-)
diff_minutes = Math.floor(diff_mms / mms_minute);
diff_mms -= diff_minutes * mms_minute;
if(diff_minutes<10){
 diff_minutes="0"+diff_minutes;
 }


// les secondes, ce qui reste en fait.
var diff_secondes = Math.floor(diff_mms / mms_seconde);
if(diff_secondes<10){
 diff_secondes="0"+diff_secondes;
 }




// on affecte nos résultats aux champs du formulaire
// on affecte nos ré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);

Merci d'avance !!

16 réponses

Réponse 1 / 16
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
29 mai 2008 à 14:01
Bonjour,
    >>avec l'heure coté serveur.
    il faut appeler un scipt coté serveur ( asp, php, ruby ... )
        qui te retournera l'heure du serveur ( en php par exemple regarde date('format') )
    puis coté javascript, calculer la différence avec l'heure client,
       faire ce que tu fais en tenant compte de cette différence.
    il ne faudrait pas appeler le serveur à chaque "boucle" ... risque de saturation !
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 2 / 16
wadpap13 Messages postés 67 Date d'inscription mercredi 14 février 2007 Statut Membre Dernière intervention 22 mars 2009
29 mai 2008 à 14:08
Avec cette ligne que je modifie var aujourdhui = new Date(<?=date('Y,m-1,d,H,i,s')?>); , j'ai tout de meme besoin d'apeller un script ?

Et pourquoi je dois calculer la différence avec l'heure coté client alors que je ne me sers plus de celle-ci ?
0
Réponse 3 / 16
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
29 mai 2008 à 14:16
>>var aujourdhui = new Date(<?php echo date('Y,m-1,d,H,i,s');?>);
    à l'oeil, comme ça .... mais dans ce cas, il faut le rappeler ce .php !

    donc échange client / serveur toutes les secondes !   c'est lourd, pénalisant... !
   
    si tu récupérais l'heure serveur 1 fois et une seule,  tu n'aurais
       plus à appeler le php, tu resterais coté client.
       comme l'heure client et celle serveur sont probablement différentes
       et que tu veux afficher l'heure seveur, il faut bien calculer la différence

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 4 / 16
wadpap13 Messages postés 67 Date d'inscription mercredi 14 février 2007 Statut Membre Dernière intervention 22 mars 2009
29 mai 2008 à 14:40
Je vois pas comment mettre celà en oeuvre.

La je defini une cible qui est la date butoire.

Ensuite je fais var diff_mms = cible.getTime() - aujourdhui.getTime(); aujourdhui etant l'heure du serveur.

Qu'est ce je dois faire pour faire la différence avec l'heure du client ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 16
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
29 mai 2008 à 14:54
la différence enre 2 heures... c'est un -
l'heure serveur tu l'as récupérée....

<?php met l'heure serveur dans une variable js par exemple ?>
html et javascript
    calcul différence avec heure client
    setTimeout d'un fonction qui fait :
          affichage heure client + différence

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 6 / 16
wadpap13 Messages postés 67 Date d'inscription mercredi 14 février 2007 Statut Membre Dernière intervention 22 mars 2009
29 mai 2008 à 15:11
Mais en fait l'algo je l'ai. C'est plutot la syntaxe qui me pose probleme :

Voila ce que j'ai mis et ca fonctionne pas :

function decompte() {


// la date courante
var aujourdhui1 = new Date(<? date('Y,m-1,d,H,i,s') ?>);
var aujourdhui2 = new Date();
var aujourdhui = aujourdhui1.getTime() - aujourdhui2.getTime();


// le total de millisecondes de différences
var diff_mms = cible.getTime() - aujourdhui2.getTime() - aujourdhui.getTime();
.....
0
Réponse 7 / 16
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
30 mai 2008 à 08:07
et tu as une erreur ?
pas regardé le reste,
        mais déjà : var aujourdhui1 = new Date("<?php echo date('Y,m-1,d,H,i,s'); ?>");
                         mais regarde ce qui est généré.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 8 / 16
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
30 mai 2008 à 09:54
aller.... ch'tiot début....
    var ds=new Date("<?php echo date("F j, Y, g:i a");?>");
    alert(ds);
    var dm=new Date();
    alert(    "date serveur : "+ds+"\r\n"+
                "date micro : "+dm+"\r\n"+
                "différence : "+(ds-dm));
je ne parle pas des fuseux horaires, et tu devaris savoir faire le reste....
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 9 / 16
wadpap13 Messages postés 67 Date d'inscription mercredi 14 février 2007 Statut Membre Dernière intervention 22 mars 2009
30 mai 2008 à 12:21
Si je mets var aujourdhui = new Date( " <?php echo date('Y,m-1,d,H,i,s'); ?>");

Il me met un truc du type : NaN : NaN NaN à la place des valeurs de date et heure.

Si j'enlève les guillemets par contre var aujourdhui = new Date(<?php echo date('Y,m-1,d,H,i,s'); ?>);

il me met bien la bonne heure du serveur, mais le compteur n'est pas dynamique. Il faut à chaque fois que je reload la page pour savoir où le compteur en est....
0
Réponse 10 / 16
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
30 mai 2008 à 12:34
>>Si je mets var aujourdhui = new Date("<?php echo date('Y,m-1,d,H,i,s'); ?>");
>>Il me met un truc du type : NaN : NaN NaN à la place des valeurs de date et heure.

    même si ça ne correspond pas à ce que j'ai mis...
    pas de raison...
        c'est bien un .PHP, sur un serveur, ou en local avec easyphp ou wamp ? hein ?

>> mais le compteur n'est pas
dynamique.
    car pas de rappel de la fonction qui affiche l'heure je suppose...

    le principe :

<?php met l'heure serveur dans une variable js par exemple ?>
    html et javascript
    calcul différence avec heure client
    setTimeout d'un fonction qui fait :
          affichage heure client + différence

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 11 / 16
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
30 mai 2008 à 12:37
rectification :
même si ça ne correspond pas à ce que j'ai mis...
    pas de raison...    quoique.... le format mis est ce qu'attend le javascript ?
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 12 / 16
wadpap13 Messages postés 67 Date d'inscription mercredi 14 février 2007 Statut Membre Dernière intervention 22 mars 2009
30 mai 2008 à 13:58
Je reprends ton code (d'ailleurs merci pour ton aide) : 

var ds=new Date("<?php echo date("F j, Y, g:i a");?>");
    alert(ds);
    var dm=new Date();
    alert(    "date serveur : "+ds+"\r\n"+
                "date micro : "+dm+"\r\n"+
                "différence : "+(ds-dm));

Ce que je n'arrive pas à voir c'est comment je vais intégrer ton code à la suite :
Sachant que je définis ci dessous une variable qui stocke la différence de millisecondes entre le temps cible (la deadline) et le temps du serveur (ici donc le temps du micro + la diff entre micro et serveur).

var diff_mms = cible.getTime() - aujourdhui.getTime();

Je débute vraiment en javascript, et j'avoue que je suis un peu largué et que je ne pige pas comment intégrer ton alert à ma ligne ci-dessus.

Merci encore.
0
Réponse 13 / 16
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
30 mai 2008 à 14:14
    var ds=new Date("<?php echo date("F j, Y, g:i a");?>");      ça c'est la date du serveur
    var dm=new Date();                                                            ça c'est date du micro
    var diff=ds-dm;                                                                   ça c'est la différence
    appel();
...

    function appel()
    {   date actuelle du micro + différence
         afficher le résultat   ( pas avec document.write car
                                        ça effacerait toute la page, javascript compris   )
         setTimeout("appel();",1000);
    }

    et là.... tu dois y arriver...

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 14 / 16
wadpap13 Messages postés 67 Date d'inscription mercredi 14 février 2007 Statut Membre Dernière intervention 22 mars 2009
30 mai 2008 à 15:40
Je te remets la totalité de mon code car malgré tes explications, je n'y comprends rien.

var cible = new Date("June 30, 2008 10:00:00");

// 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 ds = new Date(<?php echo date('Y,m-1,d,H,i,s'); ?>);
var dm=new Date();                                                          
var diff=ds-dm;                                                                  
 


// le total de millisecondes de différences
var diff_mms = cible.getTime() - diff.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;
if(diff_heures<10){
 diff_heures="0"+diff_heures;
 }


// les... minutes, bravo ;-)
diff_minutes = Math.floor(diff_mms / mms_minute);
diff_mms -= diff_minutes * mms_minute;
if(diff_minutes<10){
 diff_minutes="0"+diff_minutes;
 }


// les secondes, ce qui reste en fait.
var diff_secondes = Math.floor(diff_mms / mms_seconde);
if(diff_secondes<10){
 diff_secondes="0"+diff_secondes;
 }




// on affecte nos résultats aux champs du formulaire
// on affecte nos ré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>

Peux tu me dire ce que je dois changer dans mon code ci dessus sachant que je l'affiche comme celà :

Date butoire dans dans :
0 jour
0 :
0 :
0

Merci
0
Réponse 15 / 16
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
30 mai 2008 à 15:54
essaye au moins...
parce que là, tout ce que tu fais c'est remettre le même code...
je pense en avoir fait déjà pas mal.  
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 16 / 16
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
30 mai 2008 à 16:04
ce que je montrais c'est afficher la date/heure du serveur
    et je viens de voir ton titre !!! tu veux probablement
        faire un décompte par rapport à une date butée ?

    il faudra donc afficher : date butée - ( date micro + différence )
       mais ça me semble curieux... de prendre la date du serveur !
       c'est la date du micro me semble-t-il qu'il faudrat prendre !

    le principe restantr le même....
       seul le "calcul"  de ce qu'il faut afficher change...

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0

Discussions similaires

Compte a rebour et chronométre
cs_nico1610 -
nico1610 -

3 réponses
Compte à rebours
silversword666 -
ni69 -

5 réponses
Décompte (compte a rebours) qui affiche le nombre de mois, de jour, d'heure, de
slashf -
maelob -

20 réponses
Compte à rebours et calcule sur plus de 24 heures
cs_megamario -
megamario -

4 réponses
compte à rebours avec changement d'image
ravid87 -
ravid87 -

2 réponses
Rejoignez-nous