Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

JavaScript 1.3
Le temps

  Comment actualiser l'heure dans la page

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script

  Fonction
Le but de ce script est de placer l'heure courante dans la page elle-même, et de l'actualiser toutes les secondes.
  Principe
L'heure, comme la date, est fournie par l'ordinateur du client, le script se contente de la récupérer, de la mettre en forme puis de la placer dans un calque (layer) et de ré-écrire le calque et son contenu toutes les secondes.
L'avantage de placer l'heure dans la page est de pouvoir la mettre en forme (polices, couleurs, tailles...) et donc qu'elle s'intègre au mieux dans votre présentation.
  Le script
dans la partie <head>
<script language="JavaScript">
// Détection du navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// Création de la variable qui accueillera la chaîne
var horaire;

// Fonction de création de la chaîne qui sera affichée par le navigateur
function affiche() {

// on récupère la date complête du système
var x = new Date();

// on intercepte l'heure
var heures = x.getHours();

// on intercepte les minutes
var minutes = x.getMinutes();

// on ajoute un zéro (0) devant si les minutes sont inférieures à 10 (plus joli)
if (minutes <= 9) minutes = "0" + minutes;

// on intercepte les secondes
var secondes = x.getSeconds();

// on ajoute un zéro (0) devant si les secondes sont inférieures à 10 (plus joli)
if (secondes <= 9) secondes = "0" + secondes;

// Ici on applique les mises en forme
horaire = "<font face='arial'><b>";

// Composition de l'affichage : ici on aura une forme 'HH:MM:SS'
horaire += heures + ":" + minutes + ":" + secondes;

// On referme les mises en forme ici
horaire += "</b></font>";
}


// Fonction d'écriture du calque contenant la chaîne à afficher
function reaffiche() {

// Lancement de la création de la chaîne
affiche();

// Instructions pour Netscape
if (ns4) {
eval("interne = (document.lieu.document.lieulieu)");
with (interne) {
document.open();
document.write(horaire);
document.close();
}
}

// Instructions pour Internet Explorer
if (ie4) {
eval('document.all.lieu.innerHTML = "' + horaire + '"');
}

// On relance la fonction pour l'actualiser toutes les 1000 millisecondes (1 seconde)
setTimeout("reaffiche()",1000);
}
</script>

dans la partie <body>
<script language="JavaScript">
if (ns4) {
document.write('<ilayer id="lieu">');
document.write('<div id="lieulieu" style="position: absolute;">');
}
if (ie4) {
document.write('<div id="lieu">');
}
</script>

<script language="JavaScript">

<!-- C'est 'reaffiche()' qui écrit l'heure -->
reaffiche();
if (ns4) {
document.write('</div></ilayer>');
}
if (ie4) {
document.write('</div>');
}
</script>
  Démonstration

Voir la démonstration
  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
    		•
    Script intégré :
    time_heure_page.zip
    2 Ko    		 telechargez le script telechargez le script
    Script séparé :
    time_heure_page2.zip
    2 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    DHTML
    HTML 4
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter