Ceci fonctionne pour une page remaining-time.php où le temps GMT est saisi sur le serveur, et est ainsi indépendant du fuseau horaire et des paramètres-temps de l'ordi du visiteur :
php
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta http-equiv="refresh" content="3600; URL='http://sentrais.eu/remaining-time.php'">
<title>Remaining time before the 1rst of november, 2015 at 18:00:00 GMT</title>
<style>
body{font-family:verdana,arial;font-size:0.9em}
h1{margin:0;font-weight:normal}
#global{display:block;position:relative;width:750px;left:50%;margin:0 0 0 -385px;padding:10px 10px 45px 10px;background-color:#e7e9ab}
#timer
{display:inline-block;padding:10px;font-weight:bold;border:1px solid #777;margin-top:0;background-color:#fff;word-spacing:10px;font-size:2em}
#difference{display:inline-block;position:absolute;bottom:-135px;left:0;color:#928c43;font-size:0.8em}
.rebours
{display:inline-block;position:relative;padding-left:4px;color:#928c43;font-weight:normal;font-size:0.4em;top:-12px}
</style>
</head>
<body>
<div id="global">
<h1>Remaining time before the 1rst of november, 2015 at 18:00:00 GMT <a style="display:inline-block;position:relative;font-size:0.35em;top:-14px">Greenwich Mean Time</a></h1><br />
<span id="timer"></span><br />
<br />
<a id="difference"></a>
</div>
<script>
function YourTime()
{
yourTime = new Date();
diff =yourTime.getTimezoneOffset() / 60 * (-1) ;
var pos;
var plur;
if(diff==0)
{pos="+",plur=""}
else if(diff==1)
{pos="+",plur=""}
else if(diff>=1)
{pos="+",plur="s"}
else if(diff==-1)
{pos=""}
else if(diff<=-1)
{pos="",plur="s"}
document.getElementById("difference").innerHTML="<p>The values of this <b>inline count-down</b> do not depend on your computer's time [<b>GMT " + pos + " " + diff + " hour" + plur +"</b>] and will be the same in every place all over the world ... at the same moment !</p><p>Besides that, your computer's time is based on his own parameters you have given to, by your time zone and daylight saving time. It means that looking at the count-down you should be aware of the difference between GMT and your own time ... especially when approaching the change of the daylight saving time while the count-down will cross-over it !</p><p>For these reasons, this page thus the information about your computer's time too are refreshed every hour.</p>";
}
YourTime();
</script>
<script>
var timer=document.getElementById("timer");
var date1 = (new Date("<?php echo gmdate('d M Y H:i:s');?>")).getTime(); //Larme de php !
var date2 = (new Date ("1 Nov 2015 18:00:00")).getTime();
function Rebours()
{
var day="days";
var hour="hours";
var minute="minutes";
var second="seconds";
var sec = (date2 - date1) / 1000;
var n = 24 * 3600;
if (sec > 0)
{
d = Math.floor (sec / n);
if(d<=9){d="0"+d;if(d>=2){day="days"}else if(d<=1){day="day"}}
h = Math.floor ((sec - (d * n)) / 3600);
if(h<=9){h="0"+h;if(h>=2){hour="hours"}else if(h<=1){hour="hour"}}
mn = Math.floor ((sec - ((d * n + h * 3600))) / 60);
if(mn<=9){mn="0"+mn;if(mn>=2){minute="minutes"}else if(mn<=1){minute="minute"}}
sec = Math.floor (sec - ((d * n + h * 3600 + mn * 60)));
if(sec<=9){sec="0"+sec;if(sec>=2){second="seconds"}else if(sec<=1){second="second"}}
timer.innerHTML = ""+ d +"<a class=\"rebours\">"+ day +"</a> "+ h +"<a class=\"rebours\">"+ hour +"</a> "+ mn +"<a class=\"rebours\">"+ minute +"</a> "+ sec +"<a class=\"rebours\">"+ second +"</a> ";
date1 += 1000;
}
}
Rebours();
function ARebours()
{
arebours=setInterval("Rebours()", 1000);
}
ARebours();
</script>
</body>
</html>
où
une de larme de php sollicite gmdate() qui est équivalent à date() mais retournant GMT (temps-serveur), délesté de tout fuseau horaire et de l'heure interne d'un ordi.
Le passage aux heures d'été/hiver n'est pas considéré ici ; ce qui signifie que le compte à rebours ne 'sautera' pas d'une heure (voire d'une demi-heure, selon les 70 et quelques pays (ou Provinces et Régions !) qui pratiquent ce passage). Mais que de façon relative, le visiteur aura bien la sensation que son nouveau temps (d'été ou d'hiver) en est d'autant altéré ... à son heure propre de passage (pour Paris : le 25 octobre 2015 à 03:00:00).
Ainsi, ce sera judicieux de renseigner le visiteur de son décalage (selon son fuseau horaire et son heure d'été/hiver) par rapport à GMT (temps-serveur) (voir le script plus haut dans le topique).
Enfin, on peut imaginer un 'refresh' de la page toutes les minutes ou toutes les heures ... lorsque la date d'un changement d'heure approche et que le compte-à-rebours le chevauchera.
Modifié par pictural (20 Sep 2015 - 07:55)
?