Horloge numérique en javascript, compatible ie et ff
Soyez le premier à donner votre avis sur cette source.
Vue 23 177 fois - Téléchargée 4 430 fois
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...
Codez bien, mais codez propre ;-)
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>
   
<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 ;-)
Codes Sources
A voir également
- Horloge javascript digitale
- Horloge javascript - Meilleures réponses
- Css horloge numérique - Meilleures réponses
- Damdate : horloge analogique & digital - Codes sources - Visual Basic / VB.NET (Date & Heure)
- Horloge affichage digital - Guide
- Horloge javascript aiguille - Guide
- Horloge javascript - Guide
- Javascript : Horloge digitale - CodeS SourceS - Guide
Merci.
Il n'est forcément utile de mettre les images dans une table. Un CSS permet une tout aussi belle mise en forme.
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.