Foros del Web - Ver Mensaje Individual - reloj digital en javascript ke funcione en mozilla..

furoya · #10 (**permalink**) 03/06/2005, 08:36

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