Artículos
Javascript

Reloj en JavaScript

06/Sep/2009

Y te preguntaras ¿y para que quiero saber la hora que es?, si quiero saberla, simplemente puedo mirar la barra de mi gestor de ventanas, o simplemente mirarme la muñeca o mirar el fabuloso, reloj de pared, el cual me marca hasta las horas en punto.

Pues nosotros te lo pondremos más fácil. Para que no tengas que perder esos fabulosos segundos en mirar hacia abajo o arriba, e incluso en girar tu muñeca para ver que hora es, te vamos a explicar como poner un reloj en una página web. Aunque, me pregunto yo, si mientras se prepara el ordenador para interpretar las rutinas JavaScript me puedo hacer hasta la cena ¿no?.

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. Estos métodos son del objeto Date. Recuerda que estos son los de tu maquina.

El codigo 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 un formulario con una entrada de texto.

El valor lo volcamos accediendo al ID del campo del formulario mediante .getElementById().

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 msg). Esta función es del objeto Window.

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

Código Fuente

Descárgate el código fuente de Reloj en JavaScript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
1 Comentario
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios