Horloge numérique en javascript, compatible ie et ff

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

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)