Horloge digitale , si si

Soyez le premier à donner votre avis sur cette source.

Snippet vu 17 107 fois - Téléchargée 28 fois

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

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

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

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

il faut que tu mette un zip avec le fichier 'images/vide.gif'

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.