Accueil > > > HORLOGE (DATE ET HEURE) EN TEMPS RÉEL ET AFFICHAGE TEXTE AVEC CHOIX DU FORMAT D'AFFICHAGE (7 POUR L'INSTANT) DE LA DATE ET DE L'HEURE
HORLOGE (DATE ET HEURE) EN TEMPS RÉEL ET AFFICHAGE TEXTE AVEC CHOIX DU FORMAT D'AFFICHAGE (7 POUR L'INSTANT) DE LA DATE ET DE L'HEURE
Information sur la source
Description
Fonctionnement : Script simple (niveau débutant) permettant l'affichage au format texte de la date et l'heure en temps réel. Il permet l'affichages de plusieurs "horloges" à des endroits différents (rien d'exceptionnel je sais) sous différents formats (7 plus exactement mais on pourrais en faire +) (exemple: 2005/12/20, 12/20/2005 14:30:25...). En combinant tous les formats de date et heure on a donc un certain nombre de combinaison pour l'affichage de la date et de l'heure Voila je trouvais ca utile lorsque l'on fais plusieurs sites internet (ou autre...) et ca m'a permis de progresser en javascript!!! Les points que je trouve intéressants: -récupération de n paramètres définit dans les arguments de la fonction namosw_init_clock() lors du chargement de la page -utilisation de l'objet document.getElementById("valeur1").innerHTML qui permet d'afficher une chaine de caractère dans une balise (ici span) ayant comme id "valeur1" -utilisation de la fonction setTimeout("namosw_clock();", 1000); permettant d'executer la fonction namosw_clock() toutes les 1000 ms soit toutes les secondes -chargement du type et de la localisation de chaque horloge ainsi que chargement des tableaux définissants le nom du mois //ainsi que le nom du jours au chargement de la page ce qui permet de gagner un peu de temps lors de l'execution de la fonction chargé du calcul de la date et de l'affichage (fonction namosw_clock())
Source
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
- <title>date / horloge</title>
- <script language="JavaScript">
- <!--
- function namosw_init_clock()
- {
- //*************************************Expliquation sur le fonctionnement du script***********************************
- //Ce programme permet de créer une horloge en temps réel
- //On peut définir autant d'horloge que l'on souhaite (sur une même page) chaqu'une d'entre elle doit être definie par 2 paramètres le premier
- //permet de définir l'id de la balise span dans laquelle l'horloge apparaitra et le second paramètre permet de definir
- //le type d'horloge à utiliser
- //7 types d'horloge peuvent être affichées
- //********************************************************************************************************************
- //Cette fonction permet de charger les paramètres qui définissent les différentes horloges (localisation et type de l'horloge)
- //ainsi que le contenu des tableaux contenant les noms des jours et des mois lors du chargement de la page
-
- var type, i, top, obj, clocks, strobj, tempvar;
- clocks = new Array();
- //Permet de récupérer les n argument définits dans les paramètres de la fonction namosw_init_clock() lors du chargement de la page
- for (i = 0, top = 0; i < namosw_init_clock.arguments.length; i += 2)//ici on extrait chaque paramètre définit dans la fonction namosw_init_clock() lors du chargement de la page et on les places dans un tableau objet
- {
- //namosw_init_clock.arguments[i] : paramètre i définit dans les arguments de la fonction namosw_init_clock(argument1, argument2,...)
- strobj = eval('document.getElementById("' + namosw_init_clock.arguments[i] + '")');//Permet de définir l'objet dans lequel sera afficher l'horloge sur la page html à partir des paramètres paires définit dans la fonction lors du chargement de la page
- type = namosw_init_clock.arguments[i+1];
- if (type < 1 && 7 < type) continue;
- clocks[top++] = strobj;
- clocks[top++] = type;
- }
- //*****************definition des tableau contenant les noms des mois et des jours****************
- clocks.months = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet',
- 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
- clocks.days = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi',
- 'Jeudi', 'Vendredi', 'Samedi');
- //************************************************************************************************
- if (top > 0)
- {
- document.namosw_clocks = clocks;
- namosw_clock();
- }
- }
-
- function namosw_clock()
- {
- //fonction permettant l'affichage des différentes horloges suivant les différents formats ainsi que les différents endroits
- //(au niveau des balises span) ainsi que le lancement de l'execution toutes les secondes
- var i, type, clocks, next_call, str, hour, ampm, now, year2, year4;
- clocks = document.namosw_clocks;
- if (clocks == null) return;
- next_call = false;
- //affichage de toutes les horloges en fonction du type et de l'id de la balise span dans laquelle l'horloge sera affiché
- for (i = 0; i < clocks.length; i += 2) {
- obj = clocks[i];//objet dans lequel sera affiché la n ième horloge
- type = clocks[i+1];//type d'affichage de la n ième horloge
- now = new Date();
- year2 = now.getYear();
- year4 = year2;
- if (year2 < 1000) year4 = 1900 + year2;
- if (year2 >= 100) year2 = year4;
- //définition des formats en fonction du type 1,2,3,4...
- //remarque : document.getElementById("type1").innerHTML permet d'afficher la date ou l'heure au niveau de la balise span ayant comme id type1
- if (type == 1 || type == 2)
- {
- obj.innerHTML = now.getDate() + ' ' + clocks.months[now.getMonth()] + ' ' + year4;
- if (type == 2)
- obj.innerHTML = clocks.days[now.getDay()] + ' ' + obj.innerHTML;
- }
- else if (type == 3 || type == 4)
- {
- obj.innerHTML = year2 + '/' + (now.getMonth()+1) + '/' + now.getDate();
- }
- else if (type == 5 || type == 6)
- {
- obj.innerHTML = (now.getMonth()+1) + '/' + now.getDate() + '/' + year2;
- }
-
- if (type == 4 || type == 6 || type == 7)
- {
- hour = now.getHours();
- ampm = 0;
- //Dans cette ligne on teste aussi si les minutes et(ou) les secondes sont <10 si c'est le cas on concatène un 0 devant
- //l'heure et(ou) les secondes (on pourrait faire la même chose avec les heures
- str = hour +':'+ ((now.getMinutes() < 10) ? '0'+now.getMinutes():now.getMinutes()) +':'+ ((now.getSeconds() < 10) ? '0'+now.getSeconds():now.getSeconds());
- if (type == 7)
- {
- obj.innerHTML = str;
- }
- else
- {
- obj.innerHTML += ' ' + str;
- }
- }
- //si on utilise l'affichage de l'heure on met la variable next_call a true afin d'executer (settimeout) la fonction namosw_clock()
- //toutes les secondes (1000 millisecondes) pour obtenir l'affichage des secondes en temps réel
- if (type == 4 || type == 6 || type == 7)
- next_call = true;
- }//fin for
- if (next_call)
- window.setTimeout("namosw_clock();", 1000);
- }//fin fonction
- // -->
- </script>
- </head>
- <body OnLoad="namosw_init_clock('type1', 1, 'type2', 2, 'type3', 3, 'type4', 4, 'type5', 5, 'type6', 6, 'type7', 7)">
- <p>type1 : <span id="type1"></span></p>
- <p>type2 : <span id="type2"></span></p>
- <p>type3 : <span id="type3"></span></p>
- <p>type4 : <span id="type4"></span></p>
- <p>type5 : <span id="type5"></span></p>
- <p>type6 : <span id="type6"></span></p>
- <p>type7 : <span id="type7"></span></p>
- </body>
- </html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>date / horloge</title>
<script language="JavaScript">
<!--
function namosw_init_clock()
{
//*************************************Expliquation sur le fonctionnement du script***********************************
//Ce programme permet de créer une horloge en temps réel
//On peut définir autant d'horloge que l'on souhaite (sur une même page) chaqu'une d'entre elle doit être definie par 2 paramètres le premier
//permet de définir l'id de la balise span dans laquelle l'horloge apparaitra et le second paramètre permet de definir
//le type d'horloge à utiliser
//7 types d'horloge peuvent être affichées
//********************************************************************************************************************
//Cette fonction permet de charger les paramètres qui définissent les différentes horloges (localisation et type de l'horloge)
//ainsi que le contenu des tableaux contenant les noms des jours et des mois lors du chargement de la page
var type, i, top, obj, clocks, strobj, tempvar;
clocks = new Array();
//Permet de récupérer les n argument définits dans les paramètres de la fonction namosw_init_clock() lors du chargement de la page
for (i = 0, top = 0; i < namosw_init_clock.arguments.length; i += 2)//ici on extrait chaque paramètre définit dans la fonction namosw_init_clock() lors du chargement de la page et on les places dans un tableau objet
{
//namosw_init_clock.arguments[i] : paramètre i définit dans les arguments de la fonction namosw_init_clock(argument1, argument2,...)
strobj = eval('document.getElementById("' + namosw_init_clock.arguments[i] + '")');//Permet de définir l'objet dans lequel sera afficher l'horloge sur la page html à partir des paramètres paires définit dans la fonction lors du chargement de la page
type = namosw_init_clock.arguments[i+1];
if (type < 1 && 7 < type) continue;
clocks[top++] = strobj;
clocks[top++] = type;
}
//*****************definition des tableau contenant les noms des mois et des jours****************
clocks.months = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet',
'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
clocks.days = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi',
'Jeudi', 'Vendredi', 'Samedi');
//************************************************************************************************
if (top > 0)
{
document.namosw_clocks = clocks;
namosw_clock();
}
}
function namosw_clock()
{
//fonction permettant l'affichage des différentes horloges suivant les différents formats ainsi que les différents endroits
//(au niveau des balises span) ainsi que le lancement de l'execution toutes les secondes
var i, type, clocks, next_call, str, hour, ampm, now, year2, year4;
clocks = document.namosw_clocks;
if (clocks == null) return;
next_call = false;
//affichage de toutes les horloges en fonction du type et de l'id de la balise span dans laquelle l'horloge sera affiché
for (i = 0; i < clocks.length; i += 2) {
obj = clocks[i];//objet dans lequel sera affiché la n ième horloge
type = clocks[i+1];//type d'affichage de la n ième horloge
now = new Date();
year2 = now.getYear();
year4 = year2;
if (year2 < 1000) year4 = 1900 + year2;
if (year2 >= 100) year2 = year4;
//définition des formats en fonction du type 1,2,3,4...
//remarque : document.getElementById("type1").innerHTML permet d'afficher la date ou l'heure au niveau de la balise span ayant comme id type1
if (type == 1 || type == 2)
{
obj.innerHTML = now.getDate() + ' ' + clocks.months[now.getMonth()] + ' ' + year4;
if (type == 2)
obj.innerHTML = clocks.days[now.getDay()] + ' ' + obj.innerHTML;
}
else if (type == 3 || type == 4)
{
obj.innerHTML = year2 + '/' + (now.getMonth()+1) + '/' + now.getDate();
}
else if (type == 5 || type == 6)
{
obj.innerHTML = (now.getMonth()+1) + '/' + now.getDate() + '/' + year2;
}
if (type == 4 || type == 6 || type == 7)
{
hour = now.getHours();
ampm = 0;
//Dans cette ligne on teste aussi si les minutes et(ou) les secondes sont <10 si c'est le cas on concatène un 0 devant
//l'heure et(ou) les secondes (on pourrait faire la même chose avec les heures
str = hour +':'+ ((now.getMinutes() < 10) ? '0'+now.getMinutes():now.getMinutes()) +':'+ ((now.getSeconds() < 10) ? '0'+now.getSeconds():now.getSeconds());
if (type == 7)
{
obj.innerHTML = str;
}
else
{
obj.innerHTML += ' ' + str;
}
}
//si on utilise l'affichage de l'heure on met la variable next_call a true afin d'executer (settimeout) la fonction namosw_clock()
//toutes les secondes (1000 millisecondes) pour obtenir l'affichage des secondes en temps réel
if (type == 4 || type == 6 || type == 7)
next_call = true;
}//fin for
if (next_call)
window.setTimeout("namosw_clock();", 1000);
}//fin fonction
// -->
</script>
</head>
<body OnLoad="namosw_init_clock('type1', 1, 'type2', 2, 'type3', 3, 'type4', 4, 'type5', 5, 'type6', 6, 'type7', 7)">
<p>type1 : <span id="type1"></span></p>
<p>type2 : <span id="type2"></span></p>
<p>type3 : <span id="type3"></span></p>
<p>type4 : <span id="type4"></span></p>
<p>type5 : <span id="type5"></span></p>
<p>type6 : <span id="type6"></span></p>
<p>type7 : <span id="type7"></span></p>
</body>
</html>
Conclusion
Voir l'application du script dans les quelques lignes html présentent dans le code source. (pour tester le fonctionnement copier le code complet dans un fichier .htm et l'ouvrir avec le navigateur web)
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
heure en temps réel [ par Mezixx ]
Bonjour,comment modifier ce srcipt (et pas en mettre un autre) pour qu'il m'affiche l'heure en temps réel.<SCRIPT language=javascript> var
heure et date [ par jamelzzz ]
bonjour;je veux lorsque on clique il s'affiche l'heure de mon pc.sachant que j'ai deux formulaire l'une pour date de debut et l'autre pour date fin
comment formater lorsqu'on saisie une date et l'heure [ par machmacha ]
bonjour tout le monde,j'ai un petit problème sur le formatage d'un champ qui contient une date + l'heure j'expose mon problème: <img src="file:///C:
decalage date/heure serveur et marchine [ par laubro ]
Bonjourj'ai trouvé un petit script sympas de compte a rebourg ici mais je bloque sur l'écart entre l'heure serveur et l'heure de la machine, en effet
Compteur de temps restant Javascript [ par poinball ]
Bonjour à tous ! J'ai réussi a me trouver un petit code sympa pour me faire un countdown d'évènement. Maintenant j'aimerais sortir du countdown séparé
formater la date lors de la frappe [ par ggargamel ]
Bonjour, Sachez que je suis vraiment un débutant qui ne demande qu'à apprendre. Il s'agit également de mon premier post alors soyez indulgent si je n
compte a rebours [ par valkerio ]
bonjour voila j'ai trouve un petit script sur ce site mais je voudrais bien un peu le modifier mais je ne connais pas grand chose en javascript. donc
Convertir heure [ par Zebra1928 ]
Bonjour à tous,Je suis bloqué car je cherche une fonction pour convertir l'heure actuelle en milliseconde, et l'afficher dans une page . sec = Dat
Heure et date... [ par The_magicien ]
Connaissez-vous un script de date et d'heure n'utilisant pas ?? Car le "onload" de ma page est déjà occupé par un menu dynamique... Ou savez-vous comm
Mon horloge n'affiche que la date ? SOS [ par mani_nico ]
bonjour, je ne suis + très jeune mais faisant des créations sur le web je me suis fait un Site L'aide de votre site m'a aidée bc
|
Derniers Blogs
CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT)CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY
Bonjour à tous, Je viens de publier une proposition comprenant 5 pseudo-classes pour le CSS Working Group ayant trait à l'état de chargement d'un élément (ex: IMG,VIDEO,AUDIO,OBJECT pour l'HTML.). Si le c½ur vous en dit, vous pouvez retrouver cette p...
Cliquez pour lire la suite de l'article par FREMYCOMPANY MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ?MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice
Formation initiale Durant la formation, le découpage classique est le suivant (je donnerai les équivalences Suisse lorsque je les connaîtrais) : Ecole primaire jusqu'au Collège : Formation générale permettant d'obtenir les méthodes...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENTY'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks
Quand on a ce genre d'erreur sans log :
Et bas on a juste envie de choper le gas de Microsoft qu'a développé ça et lui foutre des baffes de Coboye ! ...
Cliquez pour lire la suite de l'article par Aleks [HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET
Avec la sortie prochaine de la Beta Consumer Preview de Windows 8, j'avais envie de revenir sur une des fonctionnalités que j'attends le plus et que, en bon geek que je suis, j'utilise déjà : Hyper-V 3 ainsi son module PowerShell.
Il y a déjà pléthor...
Cliquez pour lire la suite de l'article par Pierrick CATRO-BROUILLET IIS7 - COMPRESSION GZIPIIS7 - COMPRESSION GZIP par cyril
La compression GZIP permet d'améliorer les performances de navigation en compressant ce qu'envoie le serveur à un client. Pour comprendre comment cela fonctionne, regardons ce qu'il se passe au niveau HTTP lorsqu'un client tente d'accéder à une ress...
Cliquez pour lire la suite de l'article par cyril
Logiciels
Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|