1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Date & Heure
  5. Horloge numérique en javascript, compatible ie et ff

Horloge numérique en javascript, compatible ie et ff

1/5 (3 avis)

Vue 25 205 fois - Téléchargée 4 689 fois

Télécharger le projet
Commenter

Description

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 / Exemple : 


<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 ;-)
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
funnybuzuck Messages postés 1 Date d'inscription jeudi 24 mars 2005 Statut Membre Dernière intervention 5 mars 2012
5 mars 2012 à 04:09
Bonjour, fonctionne très bien mais y'a t'il possibilité d'appeler les images d'un autre répertoire ?
Merci.
jcomms Messages postés 2 Date d'inscription mercredi 4 novembre 2009 Statut Membre Dernière intervention 19 mars 2010
5 nov. 2009 à 14:39
Marche bien sur Mac OSX soit en Safari soit en FF. Manière intéressante de faire changer les images.
xeoscomm Messages postés 3 Date d'inscription mardi 28 avril 2009 Statut Membre Dernière intervention 27 septembre 2009
27 sept. 2009 à 12:02
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.
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (bad_dark_spirit)