Ayuda con el script

NickyJam · #1 (**permalink**) 12/02/2010, 03:11

Basicamente lo que quiero que haga es que la hora avance en tiempo real mientras el usuario esta en la pagina, aqui mi progreso:

<script>
fecha = new Date();
hora = fecha.getHours();
minutos = fecha.getMinutes();
segundos = fecha.getSeconds();
function CambiaHora()
{
if(segundos<60)
{
segundos++;
}else{
if(minutos<60)
{
minutos++;
segundos=0;
}else{
if(hora<24)
{
hora++;
minutos=0;
}else{
minutos=0;
hora=0;
segundos=0;
}
}
}
horaesc = document.getElementById("horacapa").innerHTML;
horaesc = hora+":"+minutos+":"+segundos;
setInterval("CambiaHora()",1000);
}
</script>

<body onload="CambiaHora();">

<b id="horacapa"></b>

Bueno mi cerebro pudo hasta ahi nomas, encima tengo sueño...
Voy a dormir mañana reviso aver si pasaron ^^

jackson666 · #2 (**permalink**) 12/02/2010, 08:12

Código HTML:

<html>
<head>
<title>Reloj!</title>
<style type="text/css">
#hora{
    border: 1px solid #000000;
    background-color: #54AAE4;
    color: aqua;
    text-align: center;
    width: 60px;
    height: 15px;
}
</style>
</head>
<body onload="clock();">
<script type="text/javascript">
function clock(){
var reloj= new Date();

var hora=reloj.getHours();
var minutos=reloj.getMinutes();
var segundos=reloj.getSeconds(); 

var horaFinal=new String(hora);
if(horaFinal.length==1){
    hora="0"+hora;
}
var minutosFinal=new String(minutos);
if(minutosFinal.length==1){
    minutos="0"+minutos;
}   
var segundosFinal=new String(segundos);
if(segundosFinal.length==1){
    segundos="0"+segundos;
}      

var input=document.formuReloj.hora;

input.value=hora+":"+minutos+":"+segundos;

setTimeout("clock();",1000);   
}
</script>
<form action="#" method="get" name="formuReloj" id="formuReloj">
Hora:
<input type="text" name="hora" id="hora" disabled="disabled" />
</form>
</body>
</html>

NickyJam · #3 (**permalink**) 12/02/2010, 10:08

Hola jackson666, muchas gracias por tu respuesta, pero no me funciono. Simplemente aparece un recuadro celeste en donde deberia estar la hora.

Espero nuevas respuestas.

jackson666 · #4 (**permalink**) 12/02/2010, 10:18

acabo de copiar y pegar el codigo en un archivo nuevo y funciona bien

PD: probalo con estos estilos

Código CSS:

Ver original#hora{
    border: 1px solid #000000;
    background-color: #54AAE4;
    color: #000000;
    text-align: center;
    width: 60px;
    height: 20px;
}

hschimpf · #5 (**permalink**) 13/02/2010, 08:41

Código Javascript:

Ver originalfunction clock() {
   var hhF = new Date();
   var hh = hhF.getHours();
   var mm = hhF.getMinutes();
   var ss = hhF.getSeconds();
   if (hh < 10)
      hh = "0" + hh;
   if (mm < 10)
      mm = "0" + mm;
   if (ss < 10)
      ss = "0" + ss;
   document.getElementById('hora').value = (hh + ":" + mm + ":" + ss);
   setTimeout('clock', 500);
}