Horloge digitale , si si

3/5 (4 avis)

Snippet vu 17 481 fois - Téléchargée 30 fois

Commenter

Contenu du snippet

Encore une :o)
Mais l'affichage se fait quand même d'une façon différente, autre que du texte ou des images représentant les chiffres.
Tout se fait par les cellules de tableaux, chaque chiffre est codé selon l'index des cellules qui change de classe pour pouvoir représenter le chiffre.
A vous de jouer avec les styles et bordures et fonds pour faire des horloges digitales originales :o)
Vous pouvez corser un peu la chose en augmentant le nombre de cellules des tableaux.

Source / Exemple : 


<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
.Number{display: inline;}
.CellOff {BACKGROUND-COLOR: transparent;}
.CellOn {BACKGROUND-COLOR: #006699;}
</STYLE>
<SCRIPT>
aNumbers = Array()	//	tableau representant chaque chiffre
aNumbers[0] = Array(0,1,2,3,5,6,8,9,11,12,13,14)
aNumbers[1] = Array(2,5,8,11,14)
aNumbers[2] = Array(0,1,2,5,6,7,8,9,12,13,14)
aNumbers[3] = Array(0,1,2,5,6,7,8,11,12,13,14)
aNumbers[4] = Array(0,2,3,5,6,7,8,11,14)
aNumbers[5] = Array(0,1,2,3,6,7,8,11,12,13,14)
aNumbers[6] = Array(0,1,2,3,6,7,8,9,11,12,13,14)
aNumbers[7] = Array(0,1,2,5,8,11,14)
aNumbers[8] = Array(0,1,2,3,5,6,7,8,9,11,12,13,14)
aNumbers[9] = Array(0,1,2,3,5,6,7,8,11,12,13,14)
function BigTime(dim1,dim2,div){
	document.getElementById(div).innerHTML = DrawTables(0,dim1,dim2) + " " + DrawTables(1,dim1,dim2) + "    " + DrawTables(2,dim1,dim2) + " " + DrawTables(3,dim1,dim2) + "    " + DrawTables(4,dim1,dim2) + " " + DrawTables(5,dim1,dim2)
	ShowTime()
}
function DrawTables(index, L, H){
	str = "<TABLE ID='Number" + index + "' CELLSPACING=0 CELLPADDING=0 BORDER=0 CLASS='Number'>"
	for (y=1;y<6;y++){
		y%2 ? h=L : h=H
		str+="<TR>"
		str+="<TD CLASS='CellOff'><IMG SRC='images/vide.gif' WIDTH='"+L+"px' HEIGHT='"+L+"px'></TD>"
		str+="<TD CLASS='CellOff'><IMG SRC='images/vide.gif' WIDTH='"+H+"px' HEIGHT='"+h+"px'></TD>"
		str+="<TD CLASS='CellOff'><IMG SRC='images/vide.gif' WIDTH='"+L+"px' HEIGHT='"+L+"px'></TD>"
		str+="</TR>"
	}
	str+="</TABLE>"
	return str
}
function ColorNumber(index, number){
	oTable = document.getElementById("Number" + index)
	for (i=0; i<oTable.cells.length; i++){oTable.cells[i].className = "CellOff"}
	for (i=0; i<number.length; i++){oTable.cells[number[i]].className = "CellOn"}
}
function ShowTime(){
	var ToDay = new Date()
	hr = "" + ToDay.getHours(); if(hr < 10){hr = "0" + hr}
	mn = "" + ToDay.getMinutes(); if(mn < 10){mn = "0" + mn}
	sc = "" + ToDay.getSeconds(); if(sc < 10){sc = "0" + sc}
	str = hr + mn + sc
	for (l=0; l<6; l++){ColorNumber(l, aNumbers[str.substr(l,1)])}
	setTimeout("ShowTime()",1000)
}
</SCRIPT>
</HEAD>
<BODY onload="BigTime(10,20,'test')">
	
	<DIV ID="test"></DIV>

</BODY>
</HTML>

A voir également

Ajouter un commentaire Commentaires
ananasvolant Messages postés 2 Date d'inscription mercredi 22 mars 2006 Statut Membre Dernière intervention 9 juin 2006
16 mai 2006 à 15:08
Bonjour.
Ce serait sympas d'y ajouter un 'read me' pour les débutants comme moi. J'ai l'impression d'avoir reçu une ferrari sans la clef de contact.
ifebo Messages postés 181 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 28 décembre 2006
21 juin 2005 à 14:01
C'est génial, bravo !
Mais il faudrait pouvoir d'une façon simple écarter les chiffres, avec une css par exemple, pour rendre un peu plus lisible cette horloge. Il faut faire un effort de concentration pour lire celle-ci et beaucoup pourraient s'en lasser.
A part ça c'est excellent !
ranouf Messages postés 237 Date d'inscription mercredi 18 décembre 2002 Statut Membre Dernière intervention 31 août 2009
12 oct. 2004 à 23:49
whaou c cho j'aurai jamais pensé a un truc comme ça :! bravo
jeff_the_lifeguard Messages postés 73 Date d'inscription lundi 13 octobre 2003 Statut Membre Dernière intervention 16 août 2004
9 juil. 2004 à 00:23
il faut que tu mette un zip avec le fichier 'images/vide.gif'
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 (francktfr)