Un par de mensajes más arriba quedó dicho que con solo 2 imágenes se pueden crear todos los números y demás caracteres. Pero no es cierto : con 1 imagen alcanza.
Si bien el tema se refiere a ejemplos de relojes, me parece que ya quedó claro cómo captuar el
new Date();
con javascript, por lo que terminó convirtiéndose en una colección de displays.
El siguiente muestra un emulador de LED's tipo RGB dimerizables (con animación incluida); pero no la hora.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>LED'S RGB.</title>
<script type="text/javascript">
var colores = [0,0,255,255,128,0];
var pasos = [0,1,2,3,2,4];
function mezcla(){
var bTemp = pasos[0];
var cTemp = pasos[5];
var alfa = Math.floor((Math.random() * 4) + 1);
var bravo = Math.floor((Math.random() * 4) + 1);
pasos[0] = pasos[alfa];
pasos[5] = pasos[bravo];
pasos[alfa] = bTemp;
pasos[bravo] = cTemp;
//indio.value = pasos;
//julieta.value = alfa;
//kilo.value = bravo;
setTimeout("mezcla()" , 5891);
}
function RGB0() {
var cF = "rgb("+ colores[0] +","+ colores[1] +","+ colores[2] +")";
var cT = "rgb("+ colores[3] +","+ colores[4] +","+ colores[5] +")";
document.getElementById("cartel").style.backgroundColor = cF;
for(l=0; l<28; l++){
document.getElementById("led" + l).style.backgroundColor = cT;}
colores[0] = colores[0] + pasos[0];
colores[1] = colores[1] + pasos[1];
colores[2] = colores[2] + pasos[2];
colores[3] = colores[3] + pasos[3];
colores[4] = colores[4] + pasos[4];
colores[5] = colores[5] + pasos[5];
for(p=0; p<6; p++){
if(colores[p] > 255){
colores[p] = 255; pasos[p] = pasos[p]*-1;}
else if(colores[p] < 0){
colores[p] = 0; pasos[p] = pasos[p]*-1;}
else{
colores[p] = colores[p];}
}
RGB1();
}
function RGB1() {
//charly.value= colores[0];
//delta.value= colores[1];
//eco.value= colores[2];
//foxtrot.value= colores[3];
//golf.value= colores[4];
//hotel.value= colores[5];
setTimeout("RGB0()" , 100);
}
</script>
<style type="text/css">
body {background-color:black; color:white; font-weight:bold;}
input {width:6em;}
#cartel{position:relative; width:280px; height:220px; border-collapse:collapse;
background-image:url("http://img145.imageshack.us/img145/8876/lamp1cf6.gif");
background-color:blue;}
img{width:20px; height:20px; background-color:rgb(255, 128, 0); position:absolute;}
#led0{top:80px; left:80px;}
#led1{top:100px; left:100px;}
#led2{top:80px; left:120px;}
#led3{top:60px; left:140px;}
#led4{top:80px; left:160px;}
#led5{top:100px; left:180px;}
#led6{top:80px; left:200px;}
#led7{top:60px; left:220px;}
#led8{top:40px; left:220px;}
#led9{top:20px; left:200px;}
#led10{top:20px; left:180px;}
#led11{top:20px; left:160px;}
#led12{top:20px; left:140px;}
#led13{top:20px; left:120px;}
#led14{top:20px; left:100px;}
#led15{top:20px; left:80px;}
#led16{top:40px; left:60px;}
#led17{top:60px; left:40px;}
#led18{top:80px; left:40px;}
#led19{top:100px; left:40px;}
#led20{top:120px; left:60px;}
#led21{top:140px; left:80px;}
#led22{top:140px; left:100px;}
#led23{top:140px; left:100px;}
#led24{top:140px; left:120px;}
#led25{top:160px; left:140px;}
#led26{top:160px; left:160px;}
#led27{top:180px; left:160px;}
</style>
</head>
<body>
<h2>Dibujo en <i>display</i> de matriz de <i>LED'</i>s tipo RGB con 1 imagen.</h2>
<div id="cartel" onclick="RGB0() ; mezcla()">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led0">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led1">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led2">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led3">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led4">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led5">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led6">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led7">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led8">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led9">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led10">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led11">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led12">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led13">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led14">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led15">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led16">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led17">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led18">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led19">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led20">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led21">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led22">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led23">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led24">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led25">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led26">
<img src="http://img145.imageshack.us/img145/8876/lamp1cf6.gif" id="led27">
</div>
<p>Click en el cartel para animar.</p>
<!-- fondo R <input name="charly">
G <input name="delta">
B <input name="eco"><br>
logo R <input name="foxtrot">
G <input name="golf">
B <input name="hotel"><br>
dirección y pasos <input name="indio"><br>
cambio fondo <input name="julieta"><br>
cambio logo <input name="kilo"> -->
</body>
</html> Consideraciones finales :
El logo me quedó mal; pero le puse voluntad.
Hay muchas formas de dibujar el panel. Éste es un ejemplo.
En el código aparecen líneas ocultas que usé para seguir las variables en
Internet Explorer. Se pueden borrar o habilitar para ver el funcionamiento de los colores aleatorios.
Si alguien quiere hacer un modelo que mestre los días de la semana (creo que es el único que nos falta), será bienvenido.