Reloj en JavaScript (dentro de una capa)
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 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:
<STYLE>
#capa_reloj {font:bold; color:yellow; background:blue; width:70px;}
</STYLE>
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>:
<DIV ID="capa_reloj"></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:
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.
