Reloj en JavaScript

06/Sep/2009 JavaScript , , , , , 1 Comentario

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:

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

  1. <form id="formulario">
  2. <label for="hora">En estos momentos son las...</label>
  3. <input type='text' id='hora' size=10/>
  4. </form>

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.

  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


¿Algo que nos quieras comentar?

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

*

*