Horloge digitale , si si

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

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)