Bonsoir les internautes,

S'il vous plait j'aimerais bien savoir comment puis-je faire un minuteur dans mon site qui représente un site en construction et qui met au dessus l'horaire d'ouverture de site je vais vous montrer l'idée en mettant une image au-dessous du design qui sera comme image d'index. J'aimerais aussi savoir avec quel langage (php, javascript, jquery...,) je pourrais le faire et comment?


upload/59678-under-cons.jpg

Merci et bonne soirée,
Bonjour Creaf,
s'agirait-il d'un compte-à-rebours qui annonce qu'à sa fin ton site sera opérationnel ?

Essaie ceci : http://www.timeanddate.com/clocks/freecountdown.html?n=1440&iso=20380119T031400

Note sur la langue anglaise de ton site qui évoque les 'English spoken People' : le code js ne doit pas s'ajuster sur l'heure de l'ordi du visiteur mais bien s'ajuster sur l'heure GMT (si d'emblée tu pensais recevoir des visites par exemple du Canada (*), des USA(*), d'Australie(*), de Russie (*) ou tout simplement de Londres ...).

(*) : ces pays disposent effectivement de plusieurs fuseaux horaires, et Paris et Torino avancent d'une heure actuellement par rapport à Londres !

Dans ces méthodes js il sera donc plus logique de calculer (dans le 1er script) le délai restant avant mise en service de ton site par rapport à l'heure GMT (Greenwich Mean Time = Temps Moyen de Greenwich, temps universel) ou UTC (Coordinated Universal Time) . Effectivement, peu importe l'heure qu'il serait aux 4 coins du monde, s'il ne restait à Paris que 3 jours et 5 sec il ne resterait ailleurs partout dans le monde que 3 jours et 5 sec.

Voici un complément pour offrir aux visiteurx le décalage entre GMT et l'heure de leur ordi :
<html>
<head>
<title>Diff GMT/ordi</title>
</head>
<body>
<a id="difference"></a>
<script>
 yourTime = new Date();
 diff = yourTime.getTimezoneOffset() / 60;
 document.getElementById("difference").innerHTML="The difference between your computer's time and GMT is : " + diff + " hour(s)";
</script>
</body>
</html>
Attention, le GMT par seul js est 'capté' d'après les données de l'ordi (qui peuvent être erronées ou mal paramétrées. Il donc sera préférable d'opérer par php.
Modifié par pictural (15 Sep 2015 - 00:37)
Bonjour,

Premièrement je te remercie Pictural, je vais répondre à ta question, oui il s'agit d'un time under construction.. Et sur le site que tu m'as passé, je n'arrive pas à le manipuler parce que j'ai créé avec photoshop une maquette qui va s'adapter avec le code CSS et javascript Smiley cligne


edenpulse par rapport à flipclockjs, j'ai téléchargé le fichier mais le problème c'est qu'il contient des minuteurs qui sont faits avant, donc serait-il modifiable le script en mettant ma propre date comme le générateur que Pictural m'a passé Smiley smile ?

Merci à vous deux
edenpulse a écrit :
Plus simple tout en un : http://flipclockjs.com/
;)
Je ne vois pas où dans ces scripts le décalage horaire (même côté-client) est envisagé : cela signifie qu'un Canadien de Vancouver aura un décalage net de 9 heures de retard sur Paris en hiver, 9 également en été sur la réalité du compte-à-rebours de Paris !

La seule solution exacte et respectueuse du visiteur international sera d'opter pour un php qui capte GMT(dont on peut penser que GMT est exact selon le temps-serveur, et malgré une horloge interne d'un ordi-client qui serait déréglée) ; puis en récupérant le GMT côté-serveur, de forcer l'affichage côté-client des valeurs réelles du count-down par un simple js (que l'on a instruit de la date-buttoir). Le but est bien de retourner les mêmes valeurs du compte-à-rebours à Paris, à Londres, à San Francisco ou à Melbourne ... à un instant donné.

Tout un beau programme que j'ai déniché par-ci par-là, en bribes et en lambeaux mais dont je n'ai pas réussi aujourd'hui à faire la synthèse. Laquelle synthèse existerait bien déjà quelque part, non ?

Eléments de recherche :
https://www.google.fr/webhp?sourceid=chrome-instant&rlz=1C1AVNG_enFR625FR625&ion=1&espv=2&ie=UTF-8#q=gmt+php+count+down
et peut-être ceci comme solution (incomplète sur le jour, le mois et l'année) :
https://www.mathewporter.co.uk/creating-a-free-delivery-countdown-banner-with-php-jquery/

Ce qu'il faut savoir de la différence entre GMT (Geenwich Mean Time) et UTC (Coordinated Universal Time) :
http://www.timeanddate.com/time/gmt-utc-time.html

Une solution de compte-à-rebours existe pourtant ! avec jquery (mais dont nous ne connaissons pas le php) qui soit effectivement universelle (peu importent le fuseau horaire, l'heure d'un ordi exacte ou erronée, l'heure d'hiver ou d'été) :
http://www.horlogeparlante.com/compte-a-rebours.html

Je l'ai testé avec succès en modifiant successivement l'heure interne de mon ordi (année, mois, jour, heure, minute, seconde), son fuseau horaire : une fois programmé et lancé, le compte-à-rebours renvoie toujours les mêmes valeurs à l'actualisation de la page et une continuité parfaite dans l'égrainage du temps. CQFD
Modifié par pictural (15 Sep 2015 - 06:09)
Bonjour,
pictural a écrit :
Je ne vois pas où dans ces scripts le décalage horaire (même côté-client) est envisagé

Ben l'API est là pour ça, il suffit juste de récupérer l'offset de ta timezone et lancer le plugin avec la bonne date...
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>
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)