Afficher l'heure en temps réel sur son site

Afficher l'heure sur son site, voila j'ai mis ce script en PHP bien qu'il soit principalement fait en JS, mais j'espère que cela n'offusquera personne, car en plus du JS j'ai également ajouter du CSS dont display:inline; pour éviter le retour chariot de la fin du form.

Tous les codes

KOogar

Site de l'auteur voir

[65] sources en PHP voir

Code vu 32718 fois

Enregistré le 31 Juil 2005

téléchargement du zip

impression de la fiche

Code Source

01.
02.
03.
04.
05.
06.
07.
08.
09.
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.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.

<?php
/******************************************************************************/
/*                                                                            */
/*                       __        ____                                       */
/*                 ___  / /  ___  / __/__  __ _____________ ___               */
/*                / _ \/ _ \/ _ \_\ \/ _ \/ // / __/ __/ -_|_-<               */
/*               / .__/_//_/ .__/___/\___/\_,_/_/  \__/\__/___/               */
/*              /_/       /_/                                                 */
/*                                                                            */
/*                                                                            */
/******************************************************************************/
/*                                                                            */
/* Titre          : Afficher l'heure en temps réel sur son site               */
/*                                                                            */
/* URL            : http://www.phpsources.org/scripts136-PHP.htm              */
/* Auteur         : KOogar                                                    */
/* Date édition   : 31 Juil 2005                                              */
/* Website auteur : http://www.koogar.fr                                      */
/*                                                                            */
/******************************************************************************/
?>
<!--  Code à placer dans la partie HEAD  -->

<HEAD>

<?php
// Récupère l'heure

   $localtime = localtime();

   $seconde =  $localtime[0];
   $minute =  $localtime[1];
   $heure =  $localtime[2];

?>

<SCRIPT>
      
      bcle=0;

      function clock()
      {
        if (bcle == 0)
        {
          heure = <?php echo $heure ?>;
          min = <?php echo $minute ?>;
          sec = <?php echo $seconde ?>;
        }
        else
        {
          sec ++;
          if (sec == 60)
          {
            sec=0;
            min++;
            if (min == 60)
            {
              min=0;
              heure++;
            };
          };
        };
        txt="";
        if(heure < 10)
        {
          txt += "0";
        }
        txt += heure+ ":";
        if(min < 10)
        {
          txt += "0"
        }
        txt += min + ":";
        if(sec < 10)
        {
          txt += "0"
        }
        txt += sec ;
        timer = setTimeout("clock()",1000);
        bcle ++;
        document.clock.date.value = txt ;
      }
</SCRIPT>


<STYLE TYPE="text/css">
form{
    display:inline;
}
.style {border-width: 0;background-color:#005A7B;color: #F2f2f2;}
</STYLE>

</HEAD>




<!--  Charge la fonction dans le corps de la page  -->
<BODY onLoad="clock()">

<!--  Affiche l'heure  -->
<form name="clock" onSubmit="0">
<input type="text" name="date" size="5" readonly="true" class="style">
</form>

Tous les codes Date-Heure

Fonctions du code

localtime

: Récupère l'heure locale - (PHP 4, PHP 5)

echo

: Affiche une chaîne de caractères - (PHP 4, PHP 5)

Commentaires

delta-iota
Le 26 Oct 2005 à 16:35:00

concept très interressant, ce melange de langages prouve une pure maitrise...

Le 14 Jan 2009 à 20:42:00

Bonne idée de combiner js et php : Le php ne permet pas à lui seul d'obtenir une heure dynamique, le javascript ne tient compte que de l'heure du pc client, qui peut être fausse.
En combinant les deux langages, on obtient une heure juste à quelques secondes près (le temps de chargement peut faire perdre quelques secondes).
En revanche il aurait été préferable d'afficher l'heure dans un texte plutôt qu'un formulaire
wink

Le 07 Fév 2009 à 16:39:00

Bonjour, j'ai utilisé le script mais j'ai 14 minutes de différence avec mon pc... Un peu bizarre ! J'ai donc retranché ces 14 minutes pour avoir l'heure exacte. Est ce que le problème peut venir de l'heure système et non de l'indicateur situé en bas à droite sur windows ???

Le 22 Fév 2010 à 11:42:00

L'heure affichée est l'heure du serveur. Tu peux changer la zone horaire pour ton script en insérant :

date_default_timezone_set("Europe/Paris");

avant

$localtime = localtime();

Le Script suivant affiche l'heure et la date locale (celle du browser), et non pas l'heure du serveur. Un chinois verra l'heure de Chine s'il se connecte au site.

<HTML>

<HEAD>

<SCRIPT>
function clock() {
    var days = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];
    var months = ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "aout", "septembre", "octobre", "novembre", "décembre"];
    localTime     = new Date();
    date      = localTime.getDate();
    day       = localTime.getDay();
    full_year = localTime.getFullYear();
    hours     = localTime.getHours();
    minutes   = localTime.getMinutes();
    month     = localTime.getMonth();
    seconds   = localTime.getSeconds();
    value     = "";
    if (hours < 10) {
        hours = "0" + hours;
    }
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
    value = days[day] + " " + date + " " + months[month] + " " + full_year + " " + hours + ":" + minutes + ":" + seconds;

    document.clock.date.value = value ;

    setTimeout(clock,1000);
}
</SCRIPT>

<STYLE TYPE="text/css">
form{
    display:inline;
}
.style {border-width: 0;background-color:#005A7B;color: #F2f2f2;}
</STYLE>

</HEAD>


<BODY onLoad="clock()">


<form name="clock" onSubmit="0">
<input type="text" name="date" size="64" readonly="true" class="style">
</form>

</BODY>
</HTML>

Le 20 Jan 2011 à 14:48:00

Bonjour, comment placer l'heure ave le code précédent dans mon "footer" (pied de page) ?

Le 13 Fév 2011 à 15:01:00

Merci pour ce script.
Pour te remercier, voici ma contribution : la fonction que tu as faite mais un peu plus optimiser au niveau compression; bien sûr on peut encore mieux faire !

     function clock(){
       var t='';if(!document.clock.date.value){h=<?php echo $heure ?>;m=<?php echo $minute ?>;s=<?php echo $seconde ?>;}else{s++;if(s%60==0){s=0;m++;if(m%60==0){m=0;h++;if(h%24==0){h=0;};};};}t+=h<10?'0':'';t+=h+":";t+=m<10?'0':'';t+=m+":";t+=s<10?'0':'';t+=s;document.clock.date.value=t;setTimeout("clock()",1000);
   }