CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 09 18:33:31

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

HORLOGE DIGITALE , SI SI

Information sur la source

Note :

9,75 / 10

Catégorie :Date & Heure Niveau :Débutant Date de création :05/07/2004 Vu :15 260

Auteur : francktfr

Ecrire un message privé

Site perso

Commentaire sur cette source (4)

Ajouter un commentaire et/ou une note

Description

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

<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>

<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>

Sources du même auteur

CHOIX DE DATES ET DE PERIODE

TEXT COLORISÉ AVEC LE POURCENTAGE

MENU AVEC EFFET DE DÉGRADÉ

ANNONCE LETTRE PAR LETTRE

ECLATEZ LE TEXTE

Toutes les sources de francktfr

Sources de la même categorie

CALENDRIER ANNUEL UNIVERSEL AVEC SAINTS DU CALENDRIER ET FÊT... par 007Julien

OBTENIR LE NOMBRE DE JOURS D'UN MOIS SUIVANT SON ANNÉE par hugolegrand

SAINT DU JOUR par tefa24600

NIPCLOCK 1.2 par neep

COMPTE À REBOURS POUR ÉVÉNEMENTS À RÉPÉTITION par CSIBern

Toutes les sources de la catégorie Date & Heure

Commentaires et avis

Commentaire de jeff_the_lifeguard le 09/07/2004 00:23:23

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

Commentaire de ranouf le 12/10/2004 23:49:43

whaou c cho j'aurai jamais pensé a un truc comme ça :! bravo

Commentaire de ifebo le 21/06/2005 14:01:07

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 !

Commentaire de ananasvolant le 16/05/2006 15:08:22

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.

Ajouter un commentaire

Nos sponsors

Derniers Blogs

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi

WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson

TECHDAYS PARIS 2012 : NOUVELLES TENDANCES DU POSTE DE TRAVAIL - BRING YOUR OWN PC par ROMELARD Fabrice

Forum

PB GETTER ET SETTER SUR IE<9 par aerolyte

CREATION DE SCORING OU RATING par Alex16000

API ANYWHERE DE TWITTER par coach872

RE : VéRIFICATION FORMULAIRE par maha1987

SCROLL D'IMAGES DANS UNE PAGE HTML : ORDRE ALéATOIRE DES IMAGES ? par cyber5784

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Creation d-un site internet similaire a Meetic CDC Disponible
Budget : 8 000€
URGENT-Developpement d-un annuaire
Budget : 13 000€
Fonctionnalites supplementaires sous Joomla
Budget : 800€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011