Foros del Web » Programando para Internet » Javascript »

reloj digital en javascript ke funcione en mozilla..

Estas en el tema de reloj digital en javascript ke funcione en mozilla.. en el foro de Javascript en Foros del Web. Buenas señores!!! Necesito por favor eso... un relooj digital, si se puede que vaya cambiando los segundos, pero ke me funcione en mozilla e IExplore... ...
  #1 (permalink)  
Antiguo 24/05/2005, 19:46
 
Fecha de Ingreso: enero-2005
Ubicación: PutisLandia
Mensajes: 323
Antigüedad: 19 años, 11 meses
Puntos: 0
reloj digital en javascript ke funcione en mozilla..

Buenas señores!!!

Necesito por favor eso... un relooj digital, si se puede que vaya cambiando los segundos, pero ke me funcione en mozilla e IExplore...

Tengo varios pero solo funcionan en IExplore... creo ke ya todo debe funcionar en mozilla tambien...

Alguien me puede ayudar por favor ke me diga o tenga uno???

gracias!!!

aqui les dejo el ke estaba usando que solo funciona en IEXplore..por si alguno le interesa!!
[i]
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function MakeArrayday(size) {
this.length = size;
for(var i = 1; i <= size; i++) {
this[i] = "";
}
return this;
}
function MakeArraymonth(size) {
this.length = size;
for(var i = 1; i <= size; i++) {
this = "";
}
return this;
}
function funClock() {
if (!document.layers && !document.all)
return;
var runTime = new Date();
var hours = runTime.getHours();
var minutes = runTime.getMinutes();
var seconds = runTime.getSeconds();
var dn = "AM";
if (hours >= 12) {
dn = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
if (minutes <= 9) {
minutes = "0" + minutes;
}
if (seconds <= 9) {
seconds = "0" + seconds;
}
movingtime = "<b>"+ hours + ":" + minutes + ":" + seconds + " " + dn + "</b>";
if (document.layers) {
document.layers.clock.document.write(movingtime);
document.layers.clock.document.close();
}
else if (document.all) {
clock.innerHTML = movingtime;
}
setTimeout("funClock()", 1000)
}
window.onload = funClock;
// End -->
</script>
  #2 (permalink)  
Antiguo 25/05/2005, 03:18
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 3 meses
Puntos: 381
Mira a ver si te sirve que tengo aquí http://javascript.tunait.com/javascr...dex.asp?s=hora
  #3 (permalink)  
Antiguo 25/05/2005, 11:45
 
Fecha de Ingreso: enero-2005
Ubicación: PutisLandia
Mensajes: 323
Antigüedad: 19 años, 11 meses
Puntos: 0
voy a ensayarlo tunait... gracias! luego te cuento a ver como me fue
  #4 (permalink)  
Antiguo 25/05/2005, 14:23
 
Fecha de Ingreso: octubre-2004
Ubicación: España
Mensajes: 894
Antigüedad: 20 años, 2 meses
Puntos: 3
Hola
Otro muy aparente:
http://javascript.internet.com/clock...tal-clock.html
__________________
Angel :cool:
  #5 (permalink)  
Antiguo 25/05/2005, 23:27
 
Fecha de Ingreso: enero-2005
Ubicación: PutisLandia
Mensajes: 323
Antigüedad: 19 años, 11 meses
Puntos: 0
Ese esta excelente angsanchez y funciona en mozilla, voy a revisar si tambien en IExplore, pq lo necestaba pa los dos.... gracias por el dato.!!! :]
  #6 (permalink)  
Antiguo 25/05/2005, 23:49
 
Fecha de Ingreso: enero-2005
Ubicación: PutisLandia
Mensajes: 323
Antigüedad: 19 años, 11 meses
Puntos: 0
y ke buen link tambien,!!1 graxz!!
  #7 (permalink)  
Antiguo 29/05/2005, 12:07
 
Fecha de Ingreso: agosto-2002
Mensajes: 88
Antigüedad: 22 años, 4 meses
Puntos: 1
reloj cronometro

muy bonitos los relojes, pero me gustaria uno que empezara a contabilizar el tiempo a partir de una hora predefinida o de la hora cero, como en los cronometros. se puede?
  #8 (permalink)  
Antiguo 01/06/2005, 19:55
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Hola todos :

Ese úlimo reloj se ve muy bien porque está hecho con imágenes. En lo personal me parece exágerado meter más archivos en la página sólo para mostrar la hora, pero reconozco que es la manera más segura de ver el mismo reloj en todos los navegadoes ( que descarguen las imágenes, claro ).

El código de tunait () también se puede ver con es formato, usando una fuente tipo Quartz , LCDD o similar, pero si no está instalada en la máquina cliente aparecerá con la fuente por omisión.

Sin embago, es posible hacer que el navegador dibuje un "display de 8 led's" y con un script "iluminamos" los que formen un número.

Usando una tabla con 2 filas, le damos a las celdas que van a ser dígitos un borde solid del mismo color de fondo, y con classes los pintamos selectivamente según los valores que tenga la hora en ese momento.

No posteo el que tengo porque lo hice para IE; además está muy desprolijo. Pero si algien quiere hacerlo bien, este es un buen lugar para publicarlo.

Con respecto al cronómetro. pjcaro, estoy seguro de haber visto esa pregunta en alguno de los foros. Y si no está, puedes buscar en alguna javascriptería; y si tampoco, explica mejor qué es lo que necesitas, a ver que podemos hacer.

saludos

furoya
  #9 (permalink)  
Antiguo 01/06/2005, 20:42
 
Fecha de Ingreso: enero-2005
Ubicación: PutisLandia
Mensajes: 323
Antigüedad: 19 años, 11 meses
Puntos: 0
excuse me?? no te coji media.
  #10 (permalink)  
Antiguo 03/06/2005, 08:36
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Bueno, acá está el ejemplo que tengo.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transtional//EN">
<html>
<head><title>RELOJ DIGTAL.</title>
<style>
body{background:#000; }
h2{color:lime; font-family:"quartz" "lcdd" "fixedsys"}
table{border-co llapse:collapse; padding:0; align:center; border:none}
td{border-width:6pt; border-style:solid; height:60pt; width:50pt; padding:0; }
.sep{font:25pt; border:none; width:10pt}
.BS, .BI{font-size:24pt; color:#0f0; vertical-align:bottom; text-align:center; width:20pt; border:0; padding:5pt}
.BI{vertical-align:top}
.CS0{border-color:#0f0; border-bottom-color:#000}
.CI0{border-color:#0f0; border-top-color:#000}
.CI8,.CI6{border-color:#0f0}
.CS8,.CS9{border-color:#0f0}
.CI8,.CI6{border-color:#0f0}
.CS1{border-color:#000; border-right-color:#0f0}
.CI1,.CI7{border-color:#000; border-right-color:#0f0}
.CS2,.CS3{border-color:#0f0; border-left-color:#000}
.CI2{border-color:#0f0; border-right-color:#000}
.CI3,.CI5,.CI9{border-color:#0f0; border-left-color:#000}
.CS4{border-color:#0f0; border-top-color:#000}
.CI4{border-color:#0f0; border-left-color:#000; border-bottom-color:#000}
.CS5,.CS6{border-color:#0f0; border-right-color:#000}
.CS7{border-color:#0f0; border-bottom-color:#000; border-left-color:#000}
#Sup0, #Sup1, #Sup2, #Sup3, #Sup4, #Sup5{border-bottom-width:3pt;}
#Inf0, #Inf1, #Inf2, #Inf3, #Inf4, #Inf5{border-top-width:3pt;}
#ampm{font-family:'lcdd' 'quartz' 'system'; color:#0f0; }
</style>
<script>
var formato = 24; /*12 ó 24*/
function reloj() {
var tiempo = new Date();
var tiempoH = tiempo.getHours();
var tiempoM = tiempo.getMinutes();
var tiempoS = tiempo.getSeconds();

var AmPm = (tiempoH*1 >= 12 && formato == 12) ? "PM" : 
(tiempoH*1 < 12 && formato == 12)? "AM" : "";

var tiempoHp = (tiempoH*1 > 12 && formato == 12) ? 
(tiempoH-=12) : tiempoH;

tiempoHp = (tiempoHp == 0 && formato == 12) ? 
(tiempoHp=12) : tiempoHp;

var tiempoHf = (tiempoHp<10)? "0"+tiempoHp : tiempoHp;
var tiempoMf = (tiempoM<10)? "0"+tiempoM : tiempoM;
var tiempoSf = (tiempoS<10)? "0"+tiempoS : tiempoS;

var tiempoF = ""+tiempoHf+"" + ""+tiempoMf+"" + ""+tiempoSf+"";

//DESDE AQUÍ VARIABLES A TEXTAREA
document.getElementById("TA").value= "formato : "+ formato +"\r\ntiempo : "+ tiempo +"\r\ntiempoH : "+ tiempoH +"\r\ntiempoM : "+ tiempoM +"\r\ntiempoS : "+ tiempoS +"\r\ntiempoHf : "+ tiempoHf +"\r\ntiempoMf : "+ tiempoMf +"\r\ntiempoSf : "+ tiempoSf +"\r\ntiempoF : "+ tiempoF +"\r\nAmPm : "+ AmPm ;
//HASTA AQUÍ VARIABLES A TEXTAREA

for(bravo=0; bravo<6; bravo++){
alfa=tiempoF.charAt(bravo);
charly="Sup"+bravo;
delta="Inf"+bravo;
eco="CS"+alfa;
foxtrot="CI"+alfa;
document.getElementById(charly).className=eco;
document.getElementById(delta).className=foxtrot;
document.getElementById("ampm").innerHTML = AmPm;
}
window.setTimeout("reloj()", 1000);
}

</script>
</head>
<body onload="reloj()">
<h2>Reloj con <i>display</i> de <i>LED'</i> s sin usar fuente ni imagen.</h2>
<p>.</p>

<table cellspacing="0" align="center">
<tr>
<td id="Sup0" class="CS8">.</td><td class=sep>_</td><td id="Sup1" class="CS8">.</td>
<td class="BS">•</td><td id="Sup2" class="CS8">.</td><td class="sep">.</td><td id="Sup3" class="CS8">.</td><td class="BS">•</td><td id="Sup4" class="CS8 ">.</td><td class="sep">_</td><td id="Sup5" class="CS8">__</td><td class="BI" id="ampm"></td>
</tr>
<tr>
<td id="Inf0" class="CI8" >.</td><td class="sep">.</td><td id="Inf1" class="CI8">.</td>
<td class="BI">•</td><td id="Inf2" class="CI8""> .</td><td class="sep">.</td><td id="Inf3" class="CI8"> .</td><td class="BI">•</td><td id="Inf4" class="CI8"> .</td><td class="sep">.</td><td id="Inf5" class="CI8">. </td><td></td>
</tr>
</table>
 <!-- TEXTAREA PARA VER LAS VARIABLES -->
<br>
<textarea id="TA" rows=11 cols=50></textarea>
</body>
</html>
Al final le agregué un textarea donde se ve el avance de las variables.

saludos

furoya

Última edición por furoya; 07/06/2005 a las 12:40 Razón: corregir un bug
  #11 (permalink)  
Antiguo 03/06/2005, 08:49
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Interesante

Interesante furoya :

Aunque también se puede trabajar con un reloj digital... Recuerdo que KarlanKas puso uno en las FAQs: http://www.forosdelweb.com/showpost....&postcount=121
Aunque yo me había adelantado con otro sin imágenes: http://www.forosdelweb.com/f13/reloj-analogico-118061/

Este último consume muchos recursos, así que no lo recomiendo (le doy valor académico)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #12 (permalink)  
Antiguo 03/06/2005, 09:16
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Síííííííííí.!!

Los había visto y son impresionantes ( el tuyo me costó más y dejó a la máquina con la lengua afuera... )

En fin, ahora kiyosaki tiene para eligir.

saludos

furoya
  #13 (permalink)  
Antiguo 05/06/2005, 21:19
 
Fecha de Ingreso: enero-2005
Ubicación: PutisLandia
Mensajes: 323
Antigüedad: 19 años, 11 meses
Puntos: 0
Si... grax foruya por la intencion.. esta muy bueno... pero no lo necesitaba tan grande... ni con ese texto ke sale abajo... me cambio el tamaño a todo... y si demora un poco en cargar.. de todos modos grax!!
  #14 (permalink)  
Antiguo 05/06/2005, 21:22
 
Fecha de Ingreso: enero-2005
Ubicación: PutisLandia
Mensajes: 323
Antigüedad: 19 años, 11 meses
Puntos: 0
y el de karlankas no me funciono en mozilla 1.03
  #15 (permalink)  
Antiguo 06/06/2005, 01:36
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Hola kiyosaki:

Has probado con el ejemplo del link de las FAQs que puso KarlanKas...

Es que si has hecho copy&paste seguramente se te cortaron algunas líneas...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #16 (permalink)  
Antiguo 07/06/2005, 12:54
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Estoy considerando la idea de que no estés hablando en serio, kiyosaki.

Pero también puede ser que estés pidiendo un código cut & paste porque no sepas nada de HTML o javascript.
Estos códigos son -basicamente- para estudiarlos y adaptarlos a tus necesidades.

Claro que eso de no saber cambiar el tamaño de una tabla o eliminar "ese texto ke sale abajo" ( se llama textarea )... Mmmmm ...

Bueno, a otra cosa. Edité el código del reloj porque tenía un bug que no había notado ( donde vivo se usa el formato de 24 horas, y no sabía que en AM/PM no aparece nunca '00 horas' ). Además le quité el toString() porque me parece que es sólo para IE. Quizá ahora sí funcione al menos en Firefox.
  #17 (permalink)  
Antiguo 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, 1 mes
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("&nbsp;");
ledDecDia = ledDecDia.split("1").join("&bull;");
ledDecDia = ledDecDia.split("2").join("<br>");

var ledUniDia = uniDia.split("0").join("&nbsp;");
ledUniDia = ledUniDia.split("1").join("&bull;");
ledUniDia = ledUniDia.split("2").join("<br>");

var numMes = numerosR[mes];
var ledMes = numMes.split("0").join("&nbsp;");
ledMes = ledMes.split("1").join("&bull;");
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("&nbsp;");
ledDecAnio = ledDecAnio.split("1").join("&bull;");
ledDecAnio = ledDecAnio.split("2").join("<br>\r\n");

var ledUniAnio = uniAnio.split("0").join("&nbsp;");
ledUniAnio = ledUniAnio.split("1").join("&bull;");
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&Iacute;A</th><th>D&Iacute;A</th>
<th>/</th><th>MES</th>
<th>/'</th><th>A&Ntilde;O</th><th>A&Ntilde;O</th>
</tr><tr>
<td id="diasD"></td>
<td id="diasU"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&bull;&nbsp;<br>
&nbsp;&nbsp;&nbsp;&bull;<br>
&nbsp;&nbsp;&nbsp;&bull;<br>
&nbsp;&nbsp;&bull;<br>
&nbsp;&bull;<br>
&nbsp;&bull;<br>
&bull;<br>
</td>
<td id=meses></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&bull;&nbsp;&bull;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&bull;&nbsp;&nbsp;&bull;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&bull;<br>
&nbsp;&nbsp;&nbsp;&bull;<br>
&nbsp;&nbsp;&bull;<br>
&nbsp;&nbsp;&bull;<br>
&nbsp;&bull;<br></td>
<td id="aniosD"></td>
<td id="aniosU"></td>
</tr></tbody></table>
</blockquote>

<p>El caracter <tt>&amp;bull;</tt> 
(<span style="font-family:arial, 'times new roman', 'courier new', 
georgia, helvetica;">&bull;</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&aacute;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
  #18 (permalink)  
Antiguo 29/10/2007, 15:13
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Re: reloj digital en javascript ke funcione en mozilla..

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.
  #19 (permalink)  
Antiguo 12/11/2010, 14:15
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: reloj digital en javascript ke funcione en mozilla..

Vuelvo con una versión del ejemplo anterior. Está inspirada en una de las marquesinas que ofrece SuperPimper, pero aquí no uso flash.

Para empezar, tampoco "creo" una versión LED de los caracteres, uso una fuente sans-serif y la cubro con una "rejilla" que nos da la impresión que está hecha con "puntos". O más o menos. Tampoco nos pongamos en exigentes, que usamos recursos muy modestos y bastante bien quedó.

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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>REBOTE LED'S RGB.</title>
<script type="text/javascript">

/* 6px es el lado de la imagen que forma la máscara de LED's */

var texto, cartel, ancho, alto, rangoX, rangoY;
var alfa = 6;
var bravo = 6;
var pasosX = 6;
var pasosY = 6;
var dirX = 6;
var dirY = 6;

function carga() {
texto = document.getElementById("cntnd");
cartel = document.getElementById("mrqsn");

var hoy = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"]; 
var tiempo = new Date();
texto.innerHTML = "Hoy es " +hoy[tiempo.getDay()]; 

ancho = texto.offsetWidth;
alto = texto.offsetHeight;

/* 46px = 2 * ancho borde + lado imagen */

rangoX = cartel.offsetWidth - ancho - 46;
rangoY = cartel.offsetHeight - alto - 46;

document.getElementById("rejilla").style.width = cartel.offsetWidth +"px";
document.getElementById("rejilla").style.height = cartel.offsetHeight +"px";

setTimeout("mueve()", 500);
}

function mueve() {

if (pasosX < 6) { dirX = 6; colores(); }
else if (pasosX > (rangoX)){ dirX = -6; colores(); }
else { dirX = dirX; }

if (pasosY < 6) { dirY = 6; colores(); }
else if (pasosY > (rangoY)){ dirY = -6; colores(); }
else { dirY = dirY; }

pasosX = pasosX + dirX;
pasosY = pasosY + dirY;

texto.style.left = pasosX + "px";
texto.style.top = pasosY + "px";

setTimeout("mueve()", 140)
}

var paleta0 = ["#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#ff8000", "#000000"];
var paleta1 = ["#ff0000"];
var nuevo, orden, resto;

function colores() {

if(paleta0.length == 1) {
orden = 0;
nuevo = paleta0;
paleta0 = paleta1;
paleta1 = nuevo;
resto = 1;
}
else {
orden = Math.floor(Math.random() * (paleta0.length - 1));
resto = orden % 2;
nuevo = paleta0.splice(orden, 1);
paleta1[paleta1.length] = nuevo;

}
if (resto == 0) {texto.style.color = ""+nuevo+"";}
else cartel.style.backgroundColor = ""+nuevo+"";

}

onload = carga;
</script>
<style type="text/css">
body {background-color: gray; }
#mrqsn {position: relative; width: 720px; height: 310px; border: 20px silver inset; 
background-color: black; overflow: hidden; }

#cntnd {position: absolute; color: red; font: bold 66px arial, helvetica, sans-serif; 
top: 6px; left: 6px; white-space : nowrap; }

#rejilla {position:absolute; background-color:transparent; 
background-image:url('http://img204.imageshack.us/img204/5456/6x6esq.png'); }
</style>
</head>
<body>
<h2>Cartel LED's RGB.</h2>

<div id= "mrqsn"><span id="cntnd">Hoy es hoy</span>
<div id="rejilla"></div></div>

<img src="http://img204.imageshack.us/img204/5456/6x6esq.png" 
border=2 alt="http://img204.imageshack.us/img204/5456/6x6esq.png">
</body>
</html>
Huelga decir que como la imagen es *.png () el canal alpha no se ve en IE 6 y anteriores. Si hubiese puesto una *.gif sería mejor, pero ya había subido esa a imeiyiyak, y así se queda. (Espero que dure, porque ese servicio me está trayendo algunos problemas).

Agregué algunas animaciones con JS, para que se noten las posibilidades del efecto. Como —insisto— no usa caracteres "convertidos", podemos agregar los unicode para meter 'dibujitos', y hasta otras imágenes.
Por supuesto, aproveché para mostrar el día de la semana, que era el que nos estaba faltando; y dejo enlaces para hacerlo sin JS (como marquesina), de eventos para marquee y de dibujitos unicode.

ayuda con marquee

http://www.foro-virtual.com.ar/viewt...p?f=42&t=12059

http://www.foro-virtual.com.ar/viewt...=11516&start=0
  #20 (permalink)  
Antiguo 04/09/2011, 12:52
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: reloj digital en javascript ke funcione en mozilla..

Los enlaces que puse arriba ya no funcionan. Sin embargo hice copia de los documentos y los subí a megaplod por si a alguien le interesa estudiarlos.
Los dejé linqueados en

Marquesina en todos los navegadores #5

y

font-family: unicode; #5
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:32.