CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 05 22:50:11

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Date & Heure

> HORLOGE NUMÉRIQUE EN JAVASCRIPT, COMPATIBLE IE ET FF

HORLOGE NUMÉRIQUE EN JAVASCRIPT, COMPATIBLE IE ET FF

Information sur la source

Note :

10,00 / 10

Catégorie :Date & Heure Classé sous :date, heure, numérique, firefox, explorer Niveau :Débutant Date de création :18/09/2009 Vu / téléchargé :10 524 / 934

Auteur : bad_dark_spirit

Ecrire un message privé

Site perso

Ce membre participe au partage de revenus publicitaires

Commentaire sur cette source (2)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Voici le code source javascript pour une horloge numérique. Ce script est compatible pour Internet Explorer et Firefox, les autres navigateurs n'ayant pas encore été testés.
Ce code est simple et convient à tout débutant en javascript.

Les images utilisées dans la capture sont fournies dans le zip, mais évidemment vous pouvez en utiliser d'autres, soit en modifiant le code, soit en modifiant le nom des images.

En espérant avoir rendu service...

Source

<html>
<head>
<title>l'heure et la date en image</title>
<script language="javascript">
//On récupère le nom du navigateur qu'on utilise. en fait nescape donne la date 109 pour 2009 et Internet Explorer 2009 pour 2009.
var navigateur = navigator.appName;
function affiche() {
//On définit la date
var date = new Date;
var jour = date.getDate();
var mois = date.getMonth()+1;
if(navigateur == 'Netscape') {var annee = date.getYear()+1900;} //on ajoute 1900 sinon on a 107 en année pour 2007
else {var annee = date.getYear();}
var heure = date.getHours();
var minute = date.getMinutes();
var seconde = date.getSeconds();
//si on a des chiffres <10 on rajoute un 0 devant !
if (jour<10) { jour="0"+jour; }
if (mois<10) { mois="0"+mois; }
if (heure<10) { heure="0"+heure; }
if (minute<10) { minute="0"+minute; }
if (seconde<10) { seconde="0"+seconde; }
//on recrée 2 variables avec "" devant pour voir qu'on a deux string
var heureComplete = ""+heure+minute+seconde;
var dateComplete = ""+jour+mois+annee;
//on prend ensuite un chiffre à chaque fois, et on affiche l'image correspondante
//dans le body du document.
var heure1 = heureComplete.charAt(0);
document.heure1.src = heure1+".gif";
var heure2 = heureComplete.charAt(1);
document.heure2.src = heure2+".gif";
var minute1 = heureComplete.charAt(2);
document.minute1.src = minute1+".gif";
var minute2 = heureComplete.charAt(3);
document.minute2.src = minute2+".gif";
var seconde1 = heureComplete.charAt(4);
document.seconde1.src = seconde1+".gif";
var seconde2 = heureComplete.charAt(5);
document.seconde2.src = seconde2+".gif";
//on recommence pour la date :
var jour1 = dateComplete.charAt(0);
document.jour1.src = jour1+".gif";
var jour2 = dateComplete.charAt(1);
document.jour2.src = jour2+".gif";
var mois1 = dateComplete.charAt(2);
document.mois1.src = mois1+".gif";
var mois2 = dateComplete.charAt(3);
document.mois2.src = mois2+".gif";
var annee1 = dateComplete.charAt(4);
document.annee1.src = annee1+".gif";
var annee2 = dateComplete.charAt(5);
document.annee2.src = annee2+".gif";
var annee3 = dateComplete.charAt(6);
document.annee3.src = annee3+".gif";
var annee4 = dateComplete.charAt(7);
document.annee4.src = annee4+".gif";
//on crée une variable qui nous dit de refaire la fonction toute les secondes
//Cette variable est utilisée dans le body
var tempo = setTimeout("affiche()",1000);
}
</script>
</head>
<BODY onLoad="affiche()" onUnload="clearTimeout(tempo)" style="background-color:#000000;">
<div style="text-align:center";>
<table cellpadding=0 cellspacing=0>
<tr>
<td>
<img src="0.gif" name="jour1">
<img src="1.gif" name="jour2">
<img src="s.gif">
<img src="0.gif" name="mois1">
<img src="1.gif" name="mois2">
<img src="s.gif">
<img src="2.gif" name="annee1">
<img src="0.gif" name="annee2">
<img src="0.gif" name="annee3">
<img src="0.gif" name="annee4">
</td>
</tr>
</table>
<table cellpadding=0 cellspacing=0>
<tr>
<td>
&nbsp &nbsp
<img src="0.gif" name="heure1">
<img src="0.gif" name="heure2">
<img src="h.gif">
<img src="0.gif" name="minute1">
<img src="0.gif" name="minute2">
<img src="m.gif">
<img src="0.gif" name="seconde1">
<img src="0.gif" name="seconde2">
</td>
</tr>
</table>
</div>
</body>
</html>

<html>
  <head>
    <title>l'heure et la date en image</title>
    <script language="javascript">
	
	//On récupère le nom du navigateur qu'on utilise. en fait nescape donne la date 109 pour 2009 et Internet Explorer 2009 pour 2009.
	var navigateur = navigator.appName;
	  
	function affiche() {
	  	
		//On définit la date
		var date = new Date;
		var jour = date.getDate();
		var mois = date.getMonth()+1;
		if(navigateur == 'Netscape') {var annee = date.getYear()+1900;}  //on ajoute 1900 sinon on a 107 en année pour 2007
		else {var annee = date.getYear();}
		var heure = date.getHours();
		var minute = date.getMinutes();
		var seconde = date.getSeconds();
		
		//si on a des chiffres <10 on rajoute un 0 devant !
		if (jour<10) { jour="0"+jour; }
		if (mois<10) { mois="0"+mois; }
		if (heure<10) { heure="0"+heure; }
		if (minute<10) { minute="0"+minute; }
		if (seconde<10) { seconde="0"+seconde; }
		
		//on recrée 2 variables avec "" devant pour voir qu'on a deux string
		var heureComplete = ""+heure+minute+seconde;
		var dateComplete = ""+jour+mois+annee;
		
		//on prend ensuite un chiffre à chaque fois, et on affiche l'image correspondante
		//dans le body du document.
		var heure1 = heureComplete.charAt(0);
		document.heure1.src = heure1+".gif";
		var heure2 = heureComplete.charAt(1);
		document.heure2.src = heure2+".gif";
		var minute1 = heureComplete.charAt(2);
		document.minute1.src = minute1+".gif";
		var minute2 = heureComplete.charAt(3);
		document.minute2.src = minute2+".gif";
		var seconde1 = heureComplete.charAt(4);
		document.seconde1.src = seconde1+".gif";
		var seconde2 = heureComplete.charAt(5);
		document.seconde2.src = seconde2+".gif";
		
		//on recommence pour la date :
		var jour1 = dateComplete.charAt(0);
		document.jour1.src = jour1+".gif";
		var jour2 = dateComplete.charAt(1);
		document.jour2.src = jour2+".gif";
		var mois1 = dateComplete.charAt(2);
		document.mois1.src = mois1+".gif";
		var mois2 = dateComplete.charAt(3);
		document.mois2.src = mois2+".gif";
		var annee1 = dateComplete.charAt(4);
		document.annee1.src = annee1+".gif";
		var annee2 = dateComplete.charAt(5);
		document.annee2.src = annee2+".gif";
		var annee3 = dateComplete.charAt(6);
		document.annee3.src = annee3+".gif";
		var annee4 = dateComplete.charAt(7);
		document.annee4.src = annee4+".gif";
		
	 	//on crée une variable qui nous dit de refaire la fonction toute les secondes
		//Cette variable est utilisée dans le body
		var tempo = setTimeout("affiche()",1000);      		
	}
		
	 
    </script>
  </head>
  <BODY onLoad="affiche()" onUnload="clearTimeout(tempo)" style="background-color:#000000;">
  <div style="text-align:center";>
  <table cellpadding=0 cellspacing=0>
    <tr>
	  <td>
	    <img src="0.gif" name="jour1">
		<img src="1.gif" name="jour2">
		<img src="s.gif">
		<img src="0.gif" name="mois1">
		<img src="1.gif" name="mois2">
		<img src="s.gif">
		<img src="2.gif" name="annee1">
		<img src="0.gif" name="annee2">
		<img src="0.gif" name="annee3">
		<img src="0.gif" name="annee4">
	  </td>
	</tr>
  </table>
  <table cellpadding=0 cellspacing=0>
    <tr>
	  <td>
	    &nbsp &nbsp
	    <img src="0.gif" name="heure1">
		<img src="0.gif" name="heure2">
		<img src="h.gif">
		<img src="0.gif" name="minute1">
		<img src="0.gif" name="minute2">
		<img src="m.gif">
		<img src="0.gif" name="seconde1">
		<img src="0.gif" name="seconde2">
	  </td>
	</tr>
  </table>
  </div>

  </body>
</html>

Conclusion

Codez bien, mais codez propre ;-)

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

projet heure JS
- 0.gif 111 octets
- 1.gif 109 octets
- 2.gif 109 octets
- 3.gif 109 octets
- 4.gif 109 octets
- 5.gif 109 octets
- 6.gif 109 octets
- 7.gif 109 octets
- 8.gif 109 octets
- 9.gif 109 octets
- h.gif 108 octets
- HDImage.html 3 548 octets
- m.gif 107 octets
- s.gif 106 octets
- t.gif 843 octets
- Thumbs.db15 360 octets

Télécharger le zip

Sources de la même categorie

CALENDRIER ANNUEL UNIVERSEL AVEC SAINTS DU CALENDRIER ET FÊT... par 007Julien

OBTENIR LE NOMBRE DE JOURS D'UN MOIS SUIVANT SON ANNÉE par hugolegrand

SAINT DU JOUR par tefa24600

NIPCLOCK 1.2 par neep

COMPTE À REBOURS POUR ÉVÉNEMENTS À RÉPÉTITION par CSIBern

Toutes les sources de la catégorie Date & Heure

Sources en rapport avec celle ci

NIPCLOCK 1.2 par neep

HORLOGE TRIPLE AFFICHAGE AU FORMAT AM/PM/24H/DST par sofiane1234

HEURE, DATE DU JOUR DE L'INTERNAUTE ET FÊTE À SOUHAITER. par sneezy

COMPTE À REBOURS POUR ÉVÉNEMENT par CSIBern

AFFICHER DATE ET HEURE ACTUELLE (SCRIPT TRES LÉGER ET SIMPL... par lelougarou

Commentaires et avis

Commentaire de xeoscomm le 27/09/2009 12:02:42

Fonctionne bien aussi sur OPERA.
Il n'est forcément utile de mettre les images dans une table. Un CSS permet une tout aussi belle mise en forme.

Commentaire de jcomms le 05/11/2009 14:39:28 10/10

Marche bien sur Mac OSX soit en Safari soit en FF. Manière intéressante de faire changer les images.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Comment mettre Date et Heure valide pour IE, Nescape, Firefox [ par JLB59 ] Bonjour tout le monde, J'ai fait un site que j'ai mis en ligne. Comme j'utilisais IE en local pour voir le résultat, je n'ai eu aucun prb. J'ai Afficher Date Heure en cours sur page web [ par charlybegood46 ] Bonjour,Je cherche à afficher la date et l'heure actuelle dans une page web!Merci pour votre aide. Tout est pour le mieux dans le meilleur des mondes date et heure sans refresh la page [ par metis15 ] Bonjour,je n'ai rien trouvé sur le problème d'affichage de Date et Heure qui se met à jour toute les minutes par exemple, mais SANS rec problème de vérification des champs d'un formulaire [ par arambasic ] Voici mon formulaire avec le code javascript pour le vérifié, quand j'envoie le formulaire in me donne  bien les box d'erreurs mais il verifier champ date et heure [ par dreaman ] Bjour,j'ai 3 fonctions qui vérifie mes champs de saisie de "date","heure debut" et "heure fin", mais je voudrai rassemblé les trois...commen Date et heure sans les zéros inutiles [ par metis15 ] Bonjour, dans cette source, http://www.javascriptfr.com/code.aspx?ID=15750 , je voudrais supprimer les zéros inutiles, mais vu mon niveau en Verif d'une date et d'une heure [ par Sinse ] Salut! Voila j'ai un truc plutot bizarre qui se passe : j'ai une procedure de verification de date qui marche correctement, dans la meme function je v Script date et heure [ par vernoff ] Salut j'ai pris sur ce site un script affichant la date et l'heure, il est parfait pour mon site à un detail près, il ne fonctionne pas avec Mozilla F horraire ... ouvert ou fermer... [ par kalif ] bonjour a tousen sachant que les heure d'ouverture sont le lundi ouvert de 9h a midi et de 13h a 18h, le mardi .... etc etcj'utilise ce script ci dess 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

Nos sponsors

Derniers Blogs

CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY

MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice

Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks

[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET

IIS7 - COMPRESSION GZIP par cyril

Forum

METTRE L'ARRIERE PLAN DE SITE WEB CHANGEABLE par hassen87

RE : AFFICHER UN IFRAME SELON UN SELECT par pascalito92140

RE : VéRIFICATION FORMULAIRE par jmeunier

RE : AFFICHER UN TABLEAU CACHé SUR UNE IMAGE par Julien39

COPIER / COLLER JAVASCRIPT PHP par fregeal

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche referenceur astucieux
Budget : 1 500€
Recherche expert advisor sous mql4 hedging
Budget : 200€
Creation boutique en ligne iphone- android - Republication.
Budget : 4 000€

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