Page 1 sur 2

Compte à rebours, tout dépend de l'heure...

Posté : 10 mai 2007, 07:14
par kevinf
Salut,

j'ai trouvé sur Internénet, un petit scriptounet bien sympatique qui affiche un compte à rebourd à une date, le voici :

Code : Tout sélectionner

<script language="JavaScript1.2"> function setcountdown(theyear,themonth,theday,thehour,themin,thesec){ yr=theyear;mo=themonth;da=theday;hr=thehour;min=themin;sec=thesec } // 1°) Configurez la date dans le futur dans le format ANNEE, MOIS, JOUR, HEURES sur 24h (0=minuit,23=11pm), MINUTES, SECONDES setcountdown(2007,05,20,19,0,00) // 2°) Changez les deux textes ci-dessous. Le premier pour annoncer l'évènement, le second qui s'affichera à la fin du compte à rebours. var occasion="" var message_on_occasion="C'est aujourd'hui l'ouverture, patience..." // 3°) Configurez ci-dessous 5 variables pour la largeur, hauteur, la couleur de l'arrière plan, et le style du texte du champ var countdownwidth='100%' // ou une valeur en % comme var countdownwidth='95%' var countdownheight='35px' var countdownbgcolor='' // ou une couleur en texte comme : lightyellow var opentags='<p><font size="4" face="tahoma"><strong>' var closetags='</strong></font></p>' ////////// NE RIEN EDITER CI-DESSOUS ////////////////// var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") var crosscount='' function start_countdown(){ if (document.layers) document.countdownnsmain.visibility="show" else if (document.all||document.getElementById) crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie countdown() } if (document.all||document.getElementById) document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>') window.onload=start_countdown function countdown(){ var today=new Date() var todayy=today.getYear() if (todayy < 1000) todayy+=1900 var todaym=today.getMonth() var todayd=today.getDate() var todayh=today.getHours() var todaymin=today.getMinutes() var todaysec=today.getSeconds() var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec futurestring=montharray[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec dd=Date.parse(futurestring)-Date.parse(todaystring) dday=Math.floor(dd/(60*60*1000*24)*1) dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1) dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1) dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1) //if on day of occasion if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){ if (document.layers){ document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags) document.countdownnsmain.document.countdownnssub.document.close() } else if (document.all||document.getElementById) crosscount.innerHTML=opentags+message_on_occasion+closetags return } //if passed day of occasion else if (dday<=-1){ if (document.layers){ document.countdownnsmain.document.countdownnssub.document.write(opentags+"Prochainement..."+closetags) document.countdownnsmain.document.countdownnssub.document.close() } else if (document.all||document.getElementById) crosscount.innerHTML=opentags+"L'évènement est déjà arrivé ! "+closetags return } //else, if not yet else{ if (document.layers){ document.countdownnsmain.document.countdownnssub.document.write(""+opentags+dday+ " jours, "+dhour+" heures, "+dmin+" minutes, et "+dsec+" secondes"+occasion+closetags) document.countdownnsmain.document.countdownnssub.document.close() } else if (document.all||document.getElementById) crosscount.innerHTML=""+opentags+dday+ " jours, "+dhour+" heures, "+dmin+" minutes, et "+dsec+" secondes"+occasion+closetags } setTimeout("countdown()",1000) } </script>
Cependant, ce petit scriptounet affiche le compte à rebourd en fonction de l'heure du PC (ou MAC :P) du client.

Alors ma questionnette, est tout simpliste, comment faire pour que au lien de prendre l'heure du client, prendre tout simplement l'heure du serveur chéri ...

Merci de votre aide à tous.

Posté : 10 mai 2007, 11:23
par Ryle
Le problème est que javascript s'exécute coté client et n'a donc aucun lien avec le serveur. Il te faut donc trouver un moyen de lui spécifier la date/heure qui va bien pour initialiser ton compte à rebours.

Si tu utilises php, tu peux te servir de la fonction date() qui te retournera les informations dont tu as besoin. Il te suffit ensuite de modifier la partie du code ou javascript récupère les infos du poste client en les remplaçant par les valeurs de php qui vont bien :
var today=new Date() 
var todayy=today.getYear() 
if (todayy < 1000) 
todayy+=1900 
var todaym=today.getMonth() 
var todayd=today.getDate() 
var todayh=today.getHours() 
var todaymin=today.getMinutes() 
var todaysec=today.getSeconds() 
voilounet ;)

Posté : 10 mai 2007, 18:13
par kevinf
Merci, je vois ce qu'il faut utiliser, mais je ne voit pas comment le remplacer, tu pourrait m'aider s'il te plait?

Merci

Posté : 11 mai 2007, 07:13
par kevinf
Personne, car je n'y arrive pas.

Posté : 11 mai 2007, 07:38
par Ultim4T0m
Quelque chose de ce style, tu affiche en php la date du serveur, que tu affecte aux différentes variables javascript, qui peut ensuite les utiliser.
var todayy=<?php echo date('Y'); ?>;
var todaym=<?php echo date('m'); ?>;
var todayd=<?php echo date('d'); ?>;
var todayh=<?php echo date('H'); ?>;
var todaymin=<?php echo date('i'); ?>;
var todaysec=<?php echo date('s'); ?>;
Peut surement être optimisé, mais tu as au moins le principe ^^'

Posté : 11 mai 2007, 08:33
par kevinf
Donc j'ai mis cela :
<script language="JavaScript1.2">
function setcountdown(theyear,themonth,theday,thehour,themin,thesec){
yr=theyear;mo=themonth;da=theday;hr=thehour;min=themin;sec=thesec
}
// 1°) Configurez la date dans le futur dans le format ANNEE, MOIS, JOUR, HEURES sur 24h (0=minuit,23=11pm), MINUTES, SECONDES
setcountdown(2007,05,31,19,0,00)

// 2°) Changez les deux textes ci-dessous. Le premier pour annoncer l'évènement, le second qui s'affichera à la fin du compte à rebours.
var occasion=""
var message_on_occasion="C'est aujourd'hui l'ouverture, patience..."

// 3°) Configurez ci-dessous 5 variables pour la largeur, hauteur, la couleur de l'arrière plan, et le style du texte du champ
var countdownwidth='100%' // ou une valeur en % comme var countdownwidth='95%'
var countdownheight='35px'
var countdownbgcolor='' // ou une couleur en texte comme : lightyellow
var opentags='<p><font size="4" face="tahoma"><strong>'
var closetags='</strong></font></p>'

////////// NE RIEN EDITER CI-DESSOUS //////////////////

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''

function start_countdown(){
if (document.layers)
document.countdownnsmain.visibility="show"
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie
countdown()
}

if (document.all||document.getElementById)
document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>')

window.onload=start_countdown


function countdown(){
var todayy=<?php echo date('Y'); ?>; 
var todaym=<?php echo date('m'); ?>; 
var todayd=<?php echo date('d'); ?>; 
var todayh=<?php echo date('H'); ?>; 
var todaymin=<?php echo date('i'); ?>; 
var todaysec=<?php echo date('s'); ?>; 
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
//if on day of occasion
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+message_on_occasion+closetags
return
}
//if passed day of occasion
else if (dday<=-1){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+"Prochainement..."+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+"L'évènement est déjà arrivé ! "+closetags
return
}
//else, if not yet
else{
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(""+opentags+dday+ " jours, "+dhour+" heures, "+dmin+" minutes, et "+dsec+" secondes"+occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=""+opentags+dday+ " jours, "+dhour+" heures, "+dmin+" minutes, et "+dsec+" secondes"+occasion+closetags
}
setTimeout("countdown()",1000)
}
</script>
Et j'ai obtenu cela :
L'évènement est déjà arrivé !
Que faire?

Merci

Posté : 11 mai 2007, 10:26
par guilt92
Probablement changer la date d'arrivée....
Tu veux faire un compte a rebours de la date de départ jusqu'a quand ?
Que mets tu comme parametres quand tu appelles la fonction setcountdown ??

Posté : 11 mai 2007, 10:28
par kevinf
J'ai mis le code tel qu'il est dans ma page donc la date d'arrivée est comme marqué dans le code, soit le 31 mars.

Posté : 11 mai 2007, 10:44
par guilt92
Autant pour moi je n'avais pas vu...

Par contre ton erreur est logique... Si tu avais par exemple fait un alert() pour vérifier ta date du jour tu te serais rendu compte que tu es décalé d'un mois... En effet de la meme maniere que pour la date du futur il faut faire le mois-1 pour avoir le bon mois il faut faire pareil pour la date du jour: le premier indice d'un tableau est 0, ce qui veut dire que par exemple janvier, le mois 1 doit correspondre a l indice 0 du tableau montharray donc il faut faire -1...

Bref il faut que tu remplaces la ligne

Code : Tout sélectionner

var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
par

Code : Tout sélectionner

var todaystring=montharray[todaym-1]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
mais bon au moins je t'aurai donné l'explication logique.... :p

Posté : 11 mai 2007, 10:52
par kevinf
Ca l'air de fonctionner, cependant avant de modifier le code, les secondes et donc les minutes (heures et jours), défilaient automatiquement, alors que là tout est fixe, pourquoi et comment faire pour que tout défile automatiquement?

Posté : 11 mai 2007, 10:56
par guilt92
Je peux t'expliquer le pourquoi, mais pour le "comment faire mieux" je n'ai pas la réponse.

Le probleme est que le PHP raisonne coté serveur et n'est pas dynamique, ainsi quand tu récupères la date du jour (ainsi que les heures et les secondes) cela correspond a l'heure a laquelle la page s'est affichée. Ce n'est pas dynamique, la seule facon pour que cela change est de rafraichir la page, ce qui risque d etre génant dans ton cas (un rafraichissement toute les secondes je suppose que c embetant)...

Voila pour la solution je pense qu il va falloir attendre que quelqu un de plus compétent que moi te réponde parce que je vois pas comment faire simplement. La seule idée qui me vient a l'esprit serait de readapter a partir du code initial. En effet il faut que cette date devienne dynamique et donc que ca ne soit pas du php. Il faut donc récupérer la date en php une seule fois et en faire la date du début en javascript. Mais je n'ai pas le code tout fait, du moins pas pour l'instant... Si tu as compris la méthode ca devrait etre faisable néanmoins.

Posté : 11 mai 2007, 11:01
par kevinf
Mince, alors c'était pourquoi j'utilisait ce script, il doit pourtant avoir un moyen.

PS : Ogame le fait bien, non?

Posté : 11 mai 2007, 11:37
par guilt92
Il y a bien sur un moyen voir plusieurs mais pas forcement très simple...
J'ai tenté de bidouiller le code pour que la date du serveur devienne la date initiale et qu'en suite on incrémente cette date en javascript à chaque seconde... Voila c'est probablement pas optimisé et ca ne marche pas pour les années bisextiles (en espérant que ca marche le reste du temps). Je ne te garantis rien, j'ai l'impression que ca marche mais c'est fait vite fait et un peu bidouillé....

La vraie solution consisterait à adapter ce code en prenant le temps de le faire bien mais bon j'ai ni la motivation ni le temps :) Bon courage.

Code : Tout sélectionner

<script language="JavaScript1.2"> function setcountdown(theyear,themonth,theday,thehour,themin,thesec){ yr=theyear;mo=themonth;da=theday;hr=thehour;min=themin;sec=thesec } function settoday(theyear,themonth,theday,thehour,themin,thesec) { todayy=theyear ; todaym=themonth; todayd=theday; todayh=thehour; todaymin=themin; todaysec=thesec; if(todaym==4 || todaym==6 || todaym==9 ||todaym==11) max_month=30; else if(todaym==2) max_month=28; else max_month=31; } // 1°) Configurez la date dans le futur dans le format ANNEE, MOIS, JOUR, HEURES sur 24h (0=minuit,23=11pm), MINUTES, SECONDES setcountdown(2007,05,20,19,0,00) settoday(<?php echo date('Y').",".date('m').",".date('d').",".date('H').",".date('i').",".date('s'); ?>); // 2°) Changez les deux textes ci-dessous. Le premier pour annoncer l'évènement, le second qui s'affichera à la fin du compte à rebours. var occasion="" var message_on_occasion="C'est aujourd'hui l'ouverture, patience..." // 3°) Configurez ci-dessous 5 variables pour la largeur, hauteur, la couleur de l'arrière plan, et le style du texte du champ var countdownwidth='100%' // ou une valeur en % comme var countdownwidth='95%' var countdownheight='35px' var countdownbgcolor='' // ou une couleur en texte comme : lightyellow var opentags='<p><font size="4" face="tahoma"><strong>' var closetags='</strong></font></p>' ////////// NE RIEN EDITER CI-DESSOUS ////////////////// var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") var crosscount='' function start_countdown(){ if (document.layers) document.countdownnsmain.visibility="show" else if (document.all||document.getElementById) crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie countdown() } if (document.all||document.getElementById) document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>') window.onload=start_countdown function countdown(){ todaysec++; if(todaysec==60) { todaysec=0; todaymin++; if(todaymin==60) { todaymin=0; todayh++; if(todayh==24) { todayh=0; todayd++; if(todayd==max_month+1) { todayd=1 todaym++ if(todaym++==13) { todaym=1; todayy++; } } } } } var todaystring=montharray[todaym-1]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec futurestring=montharray[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec dd=Date.parse(futurestring)-Date.parse(todaystring) dday=Math.floor(dd/(60*60*1000*24)*1) dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1) dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1) dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1) //if on day of occasion if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){ if (document.layers){ document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags) document.countdownnsmain.document.countdownnssub.document.close() } else if (document.all||document.getElementById) crosscount.innerHTML=opentags+message_on_occasion+closetags return } //if passed day of occasion else if (dday<=-1){ if (document.layers){ document.countdownnsmain.document.countdownnssub.document.write(opentags+"Prochainement..."+closetags) document.countdownnsmain.document.countdownnssub.document.close() } else if (document.all||document.getElementById) crosscount.innerHTML=opentags+"L'évènement est déjà arrivé ! "+closetags return } //else, if not yet else{ if (document.layers){ document.countdownnsmain.document.countdownnssub.document.write(""+opentags+dday+ " jours, "+dhour+" heures, "+dmin+" minutes, et "+dsec+" secondes"+occasion+closetags) document.countdownnsmain.document.countdownnssub.document.close() } else if (document.all||document.getElementById) crosscount.innerHTML=""+opentags+dday+ " jours, "+dhour+" heures, "+dmin+" minutes, et "+dsec+" secondes"+occasion+closetags } setTimeout("countdown()",1000) } </script>

Posté : 11 mai 2007, 11:51
par kevinf
Merci, ca marche bien et c'est ce que je voulais, donc merci beaucoup à toi!

Merci

PS: Il y a juste une avance de 2 secondes par rapport à l'heure du serveur, mais c'est rien.

Posté : 11 mai 2007, 11:58
par guilt92
PS: Il y a juste une avance de 2 secondes par rapport à l'heure du serveur, mais c'est rien.
Effectivement, cela vient du fait que j'incrémente les secondes dès la premiere itération...
Remplace

Code : Tout sélectionner

todaysec=thesec;
par

Code : Tout sélectionner

todaysec=thesec-1;
dans la fonction settoday et ca devrait fonctionner à la seconde près ;)