Uno de los artículos más leidos, aunque no el que más, es el que explica cómo crear un Reloj en JavaScript. En dicho artículo se explica como poner un reloj dentro de un campo input de un formulario. Y claro, esto puede poner bastantes limitaciones en el diseño de nuestra página.
Es por ello que, en este artículo, explicamos como crear nuevamente el reloj, pero esta vez, su destino será una capa. Esto permite colocar la capa en cualquier parte de la página, facilitando el diseño de la misma.
Bueno pasamos a lo practico. Primeramente obtenemos la fecha y de la fecha mediante los métodos .getHours(), .getMinutes() y .getSeconds() obtenemos la hora, minutos y segundos. Recuerda que estos son los datos de la hora de tu maquina.
El código seria el siguiente:
var dia = new Date();
var hora = dia.getHours();
var minutos = dia.getMinutes();
var segundos = dia.getSeconds();
Posteriormente realizaremos una comprobación de que si el valor que tiene en un momento dado cualquiera de las variables anteriores esta entre 0 y 9, añadiremos un cero delante. Simplemente para que nos quede más mona la hora.
if ((segundos >= 0)&&(segundos <= 9)){
segundos="0"+segundos;
}
Para visualizar la hora en el navegador crearemos una capa. En primer lugar definiremos el estilo que queramos darle a la capa en la cabecera de la página, es decir, dentro de las etiquetas <HEAD> y </HEAD>. Para definir el estilo utilizaremos las etiquetas <STYLE> y </STYLE> de la siguiente forma:
#capa_reloj {font:bold; color:yellow; background:blue; width:70px;}
En nuestro caso la capa va a tener el fondo azul y las letras amarillas.Pero se puede formatear la capa al gusto del consumidor.
Y segundo incluiremos nuestra capa dentro de la página mediante las etiquetas <DIV> y </DIV>:
Deberemos de tener en cuenta que para modificar el contenido de la capa deberemos de utilizar la propiedad innerHTML, en el método en el que mostramos la información:
document.getElementById("capa_reloj").innerHTML = time;
Y la forma de ejecución es el mostrar la hora cada segundo mediante la función setTimeout(cadena,milisegundos), la cual ejecuta la cadena indicada pasados los milisegundos indicados. (En nuestro caso cada segundo = 1000 milisegundos).
window.setTimeout("mostrar()",1000);
También indicar que hay que empezar a ejecutarlo cuando se cargue la pagina, es por ello que utilizaremos el método onLoad(), para empezar a ejecutarlo, mediante setTimeout.
