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

Ce site au démarrage

begin process at 2010 03 19 12:21:29

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é :5 162 / 646

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

CHRONOMÈTRE AMÉLIORÉ par Kolosta

SLEEP() SANS BOUCLE D'ATTENTE CONSOMMATRICE par Phildepantin

AFFICHAGE DE L'HEURE ET DU FUSEAU HORAIRE (TIMEZONE) SUR LA ... par navylav2

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

FÊTER UN ANNIVERSAIRE AUTOMATIQUEMENT par pitoule

Toutes les sources de la catégorie Date & Heure

Sources en rapport avec celle ci

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

SCRIPT ANTI-INTERNET EXPLORER ! par Ahweb

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

MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg

TECHDAYS 2010 GENèVE : RETROUVEZ-MOI POUR UNE SESSION SUR LA HAUTE DISPONIBILITé ET LE SCALEOUT AVEC SQL SERVER par christian

[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA par cyril

CERTIFICATIONS BETA .NET 4 par KooKiz

[MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2 par redo

Forum

TRI PAR ORDRE ALPHABéTIQUE par El_CaNaRdO

RE : LECTURE PROPRIéTé IMAGE SUR BOUTON PARCOURIR par dadbn

RE : LECTURE PROPRIéTé IMAGE SUR BOUTON PARCOURIR par PetoleTeam

RE : RAFRAICHIR UNE DIV CONTENANT DU PHP par doudayassine

RE : LECTURE PROPRIéTé IMAGE SUR BOUTON PARCOURIR par dadbn

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

RECHERCHE CONSULTANT REFERENCEUR WEB
Budget : 10 000€
plaquette - logo
Budget : 350€
Gestion clientele JEE
Budget : 500€

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods