Reloj Javascript en una capa

09/Mar/2010 JavaScript , , , , , , 3 Comentarios

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:

  1. var dia = new Date();
  2. var hora = dia.getHours();
  3. var minutos = dia.getMinutes();
  4. 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.

  1. if ((segundos >= 0)&&(segundos <= 9)){
  2. segundos="0"+segundos;
  3. }

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:

  1. #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>:

  1. <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:

  1. 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).

  1. 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.

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Reloj Javascript en una capa”

Víctor Cuervo

setTimeout con parámetros - Línea de Código

[…] lanzar un método una vez transcurridos cierto milisegundos. Son muy conocidos los ejemplos para construir un reloj, contando caracteres […]

Víctor Cuervo

codigos secretos

He estado vistando paginas porr lla red durante 3 horas estos dias,
y todavia no he logrado localizar ningun artculo parecido al
tuyo. Se me antoja adorable y de gran valia para mi tarea.
Personalmente, sii administradores de paginas colgaran posts
tan genialws como el que haces, las webs tendrian bastante mas validos que hasta ahora.

Revisa y navega por mi homepage… codigos secretos

Víctor Cuervo

juegos gratis de mario bros y luigi

Me ha gustado mucho de la manera que has puesto en relacion a ell tema.
¿Donde seria capaz encontrar todavia mas posteo referente a el tema?.

Me chifla tu forum.

Revia y puedes navega por mi websiteOo juegos gratis de mario bros y luigi

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*