19/03/2007, 11:39
|
| (Desactivado) | | Fecha de Ingreso: noviembre-2002 Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años Puntos: 317 | |
| Re: reloj digital en javascript ke funcione en mozilla.. (fecha y UTC)
Nos quedó una buena colección de relojes.
En realidad, una buena colección de displays analógicos y digitales.
Siguiendo con la idea de los 'segmentos LED', preparé otras dos versiones. Esta usa fuentes pero aún así se ve ( masomenos ) igual en cualquier máquina porque simula una 'matriz de LED'.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>FECHA LED'S.</title>
<script type="text/javascript">
var numerosA = new Array()
numerosA[0] = "011121000121001121010121100121000120111";
numerosA[1] = "0012011200120012001200120111";
numerosA[2] = "0111210001200001201112121211111";
numerosA[3] = "011102100012000012001120000121000120111";
numerosA[4] = "00012001120101210012111112000120001";
numerosA[5] = "11111212111120000120000121000120111";
numerosA[6] = "0011201212111121000121000120111";
numerosA[7] = "111112000012000120012012121";
numerosA[8] = "011102100012100012011121000121000120111";
numerosA[9] = "01110210001210001201111200001200012011";
var numerosR = new Array()
numerosR[0] = "01110200100200100200100200100200100201110";
numerosR[1] = "011111102001001002001001002001001002";
numerosR[1] += "00100100200100100201111110";
numerosR[2] = "0111111102001010100200101010020010101002";
numerosR[2] += "00101010020010101002011111110";
numerosR[3] = "1111111112010100012010100012010010102";
numerosR[3] += "010010102010001002111111111";
numerosR[4] = "111111120100012010001200101020010102";
numerosR[4] += "00010021111111";
numerosR[5] = "1111111112010001012010001012001010012";
numerosR[5] += "001010012000100012111111111";
numerosR[6] = "1111111111120100010101201000101012";
numerosR[6] += "001010010120010100101200010001012";
numerosR[6] += "11111111111";
numerosR[7] = "1111111111111201000101010120100010101012";
numerosR[7] += "001010010101200101001010120001000101012";
numerosR[7] += "1111111111111";
numerosR[8] = "1111111112010100012010010102010001002";
numerosR[8] += "010010102010100012111111111";
numerosR[9] = "111111120100012001010200010020010102";
numerosR[9] += "01000121111111";
numerosR[10] = "1111111112010001012001010012000100012";
numerosR[10] += "001010012010001012111111111";
numerosR[11] = "1111111111120100010101200101001012";
numerosR[11] += "000100010120010100101201000101012";
numerosR[11] += "11111111111";
function TMP(){
var tiempo = new Date();
var anio = tiempo.getFullYear() + "";
var mes = tiempo.getMonth();
var dia = tiempo.getDate();
dia = (dia < 10) ? "0" + dia : "" + dia;
var numDia = dia.split("");
var decDia = numerosA[numDia[0]];
var uniDia = numerosA[numDia[1]];
var ledDecDia = decDia.split("0").join(" ");
ledDecDia = ledDecDia.split("1").join("•");
ledDecDia = ledDecDia.split("2").join("<br>");
var ledUniDia = uniDia.split("0").join(" ");
ledUniDia = ledUniDia.split("1").join("•");
ledUniDia = ledUniDia.split("2").join("<br>");
var numMes = numerosR[mes];
var ledMes = numMes.split("0").join(" ");
ledMes = ledMes.split("1").join("•");
ledMes = ledMes.split("2").join("<br>\r\n");
var numAnio = anio.split("");
var decAnio = numerosA[numAnio[2]];
var uniAnio = numerosA[numAnio[3]];
var ledDecAnio = decAnio.split("0").join(" ");
ledDecAnio = ledDecAnio.split("1").join("•");
ledDecAnio = ledDecAnio.split("2").join("<br>\r\n");
var ledUniAnio = uniAnio.split("0").join(" ");
ledUniAnio = ledUniAnio.split("1").join("•");
ledUniAnio = ledUniAnio.split("2").join("<br>\r\n");
document.getElementById("diasD").innerHTML = ledDecDia;
document.getElementById("diasU").innerHTML = ledUniDia;
document.getElementById("meses").innerHTML = ledMes;
document.getElementById("aniosD").innerHTML = ledDecAnio;
document.getElementById("aniosU").innerHTML = ledUniAnio;
}
onload = TMP;
</script>
<style type="text/css">
body {font-size:100%; background-color:#000000; color:#ff9900;
font-family:"fixedsys" "quartz" "lcdd" monospace; }
table {border:1px #ff9900 dotted;}
th , td {font-size:50%; let//ter-spacing:50%;
font-family:"courier new" "lucida console" "monotype.com"
"ocr a extended" monospace; line-height:45%; border:0; }
p {font-size:90%; }
</style>
</head>
<body>
<h2>Fecha con <i>display</i> de matriz de <i>LED'</i>s
sin imagen y con fuente <tt>monospace</tt> que contenga
el caracter <i>bullet</i>.</h2>
<br>
<blockquote>
<table><tbody>
<tr><th>DÍA</th><th>DÍA</th>
<th>/</th><th>MES</th>
<th>/'</th><th>AÑO</th><th>AÑO</th>
</tr><tr>
<td id="diasD"></td>
<td id="diasU"></td>
<td> • <br>
•<br>
•<br>
•<br>
•<br>
•<br>
•<br>
</td>
<td id=meses></td>
<td> • •<br>
• •<br>
•<br>
•<br>
•<br>
•<br>
•<br></td>
<td id="aniosD"></td>
<td id="aniosU"></td>
</tr></tbody></table>
</blockquote>
<p>El caracter <tt>&bull;</tt>
(<span style="font-family:arial, 'times new roman', 'courier new',
georgia, helvetica;">•</span>) se puede reemplazar por un punto
(.) para evitar que aparezca un signo de "caracter desconocido"
si ninguna de las fuentes declaradas está instalada.</p>
</body>
</html>
Las cadenas para dibujar los números son un poco largas; aunque se pueden comprimir, no lo hice para que se entendiera mejor cómo funciona el escript. Usé la fecha en vez de la hora para ejercitarme en numeración romana, pero "octubre" me quedó algo flojo.
El otro ejemplo también simula LED's, pero la matriz es real.
Más arriba mencioné que no era un buen negocio usar imágenes si se podía generar números en el navegador. Y es algo razonable si los números son grandes de tamaño; si son pequeños no le hace tanta diferencia porque pesan poco y se cargan rápido.
Aquí va uno que muestra números grandes con sólo 2 imágenes pequeñas.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>HORA UTC LED'S.</title>
<script type="text/javascript">
var ledOff =
"<img src= 'http://www.forosdelweb.com/images/statusicon/user_offline.gif'>"
var ledOn =
"<img src= 'http://www.forosdelweb.com/images/statusicon/user_invisible.gif'>"
var decHora, horaU, minD, minU;
var tiempoUTC = "";
var borde = "";
var puntos = [3, 3, 2, 3, 2, 3, 3];
var numeros = new Array();
numeros[0] = [25, 22, 22, 22, 22, 22, 25];
numeros[1] = [29, 25, 29, 29, 29, 29, 29];
numeros[2] = [25, 22, 30, 29, 27, 23, 16];
numeros[3] = [25, 22, 30, 29, 30, 22, 25];
numeros[4] = [29, 25, 25, 21, 16, 29, 29];
numeros[5] = [16, 23, 17, 22, 30, 22, 25];
numeros[6] = [25, 22, 23, 17, 22, 22, 25];
numeros[7] = [16, 30, 29, 29, 27, 27, 27];
numeros[8] = [25, 22, 22, 25, 22, 22, 25];
numeros[9] = [25, 22, 22, 24, 30, 22, 25];
numeros['s'] = [31, 31, 31, 31, 31, 31, 31];
function conv(){
for(p=0; p<7; p++) {
puntos[p] = puntos[p].toString(2);
puntos[p] = puntos[p].split("0").join(ledOn);
puntos[p] = puntos[p].split("1").join(ledOff);
}
for(o=0; o<23; o++) {borde += ledOff;}
borde + "<br>\r\n";
for(i=0; i<10; i++){
for(p=0; p<7; p++){
var binario = (numeros[i][p]).toString(2);
var leds = binario.split("0").join(ledOn);
leds = leds.split("1").join(ledOff);
numeros[i][p] = leds;
}
}
for(p=0; p<7; p++){
var binario = (numeros['s'][p]).toString(2);
var leds = binario.split("0").join(ledOn);
leds = leds.split("1").join(ledOff);
numeros['s'][p] = leds;
}
UTC();
}
function UTC(){
var tiempo = new Date();
var hora = tiempo.getUTCHours();
var minu = tiempo.getUTCMinutes();
hora = (hora == 24) ? 0 : hora;
hora = (hora < 10) ? "s" + hora : "" + hora;
var numHora = hora.split("");
var decHora = numeros[numHora[0]];
var uniHora = numeros[numHora[1]];
minu = (minu < 10) ? "0" + minu : "" + minu;
var numMinu = minu.split("");
var decMinu = numeros[numMinu[0]];
var uniMinu = numeros[numMinu[1]];
//alert(hora+" : "+minu)
tiempoUTC = "";
tiempoUTC += borde + "<br>\r\n";
for(l=0; l<7; l++){
tiempoUTC += decHora[l] + uniHora[l] + puntos[l] + decMinu[l] + uniMinu[l] + ledOff + "<br>\r\n";}
tiempoUTC+= borde + "<br>\r\n";
document.getElementById("matriz").innerHTML = tiempoUTC;
setTimeout("UTC()", 60000)
}
onload = conv;
</script>
<style type="text/css">
body {font-family: "fixedsys" "quartz" "lcdd" monospace;
background-color: #000000; color: #cc0000;}
#matriz img {height: 15px; width: 15px;}
h2 {background-color: #9999cc;}
</style>
</head>
<body>
<h2>Hora UTC en <i>display</i> de matriz de <i>LED'</i>s
con 2 imágenes.</h2>
<br>
<blockquote>
<div id="matriz"></div>
</blockquote>
</body>
</html>
Para crear el array de los dígitos, reemplacé cada LED apagado por un "1" y cada LED encendido por un "0", luego tomé las líneas de cada 'caracter' ( de arriba hacia abajo ) y las guardé como elementos de array . Por último, convertí estas cadenas binarias a decimal para reducir el lenght .
Y para reconstruir los 'caracteres', puse un escript que siguiera el camino inverso. Como colocar la Hora en la pagina pero no del komputador si no la de pais pasar numeros decimales a binarios en javascrip Contador en numeros romanos askii (HTML) y binario (imagen) en una misma página |