Reloj en pantalla

El script Como funciona
 //Mas en: http://javascript.espaciolatino.com/

function actReloj()
{
var hhmmss=new Date()
var horas=hhmmss.getHours()
var minutos=hhmmss.getMinutes()
var segundos=hhmmss.getSeconds()
var lahora=""
//Convertimos los números a dos dígitos, o sea, 6 -> 06
horas = (horas<=9)?("0"+horas):horas;
minutos = (minutos<=9)?("0"+minutos):minutos;
segundos=(segundos<=9)? ("0"+segundos):segundos;

//Aquí construimos la cadena de texto HTML con la hora,
//y el tipo de letra que se escribe en la capa del reloj.
lahora="<font size='5' face='Arial' ><b>"
lahora += horas+":"+minutos+":" +segundos
lahora += "</b></font>"
if (reloj = document.getElementById)
     reloj.innerHTML=lahora;
else
     if (document.all)
          document.all.reloj.innerHTML = lahora
     else
        {
         document.layers.reloj.document.write(lahora);
         document.layers.reloj.document.close();
        }
//ejecuta la función cada segundo (1000 miliseg)
setTimeout("actReloj()",1000);
}

 La función determina la fecha y hora del momento con Date() y la almacena en la variable hhmmss. Luego determina las horas (getHours ), los minutos (getMinutes ) y los segundos (getSeconds).

Luego convierte los valores devueltos a cadenas con dos dígitos. Si el número de horas, por ejemplo, es menor que 10 le pone un cero a la izquierda. Así 8 se convierte en 08. Igualmente hace con los minutos y los segundos.

Por último construye una cadena HTML con el texto de la hora. En esta cadena se pueden poner las etiquetas HTML que se quiera. En el ejemplo se colcoan las etiquetas para conseguir un tipo de letra Arial de tamaño 5 y en negrita.

Sólo queda colocarlo en el documento, para ello usamos la propiedad innerHTML, si trabajamos con MSIE o con la versión Netscape 6 o posterior. Esta es una propiedad que poseen la mayoría de de los elementos HTML y contiene lo que el elemento muestra en la página web.

Para MSIE anterior a 5 se usa document.all.reloj para el elemento HTML donde va el reloj, y en el caso de Netscape 4 se usa document.layers.reloj

Por último sólo queda activar un temporizador que llame a esta función cada segundo (1000 milisegundos son 1 segundo).
La página Como se usa
 <BODY onload="actReloj()">

< !-- La etiqueta Div que sigue define la capa que contendrá el reloj y su posición vertical (top) y horizontal (left) -->

< div id="reloj"
style="position:absolute; top: 100; left: 100"></div>

</BODY>
< /HTML>

 Una vez colocado el script en su lugar (en la sección HEAD) debemos colocar en la página algún sitio en el que se mostrará la hora:minuo:segundo actualizado. En este ejemplo se escoge una capa con posicionamiento absoluto, con lo que puedes colocarla en la parte de la página que quieras (lo controlas con los valores de top y left). También podrías haber escogido un span o una celda de una tabla, en cualquier caso asegúrate de colocarle el valor "reloj" en el atributo ID.

Sólo queda vincular el evento onload a la función para que comienze a correr el reloj.
   
     
Envía esta página a un amigo. Te lo agradecerá.   Poner esta página como página de inicio