feed twitter facebook LinkedIn facebook

JavaScript » Reloj en JavaScript

Septiembre 6, 2009 por Víctor Cuervo . 8559 visitas 3 Comentarios Imprimir Imprimir

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.  
  2. <form id="formulario">
  3. <label for="hora">En estos momentos son las...</label>
  4. <input type='text' id='hora' size=10/>
  5. </form>
  6.  

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

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre JavaScript
Foro sobre JavaScript
tags: , , , , , , , , ,

Artículos relacionados:

3 comentarios »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

  1. Linea de Codigo » Reloj Javascript en una capa
    Marzo 9, 2010 #

    [...] 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 [...]

  2. Reloj con la hora del servidor « Mi Sistema Web – Consultores en Sistemas
    Enero 26, 2012 #

    [...] el artículo de ayer veíamos como podíamos crear un reloj en javascript. En este ejemplo se puede ver cómo se obtiene la hora de la máquina cliente donde se ejecuta. [...]

  3. Hora del Servidor « Dudas de Programacion
    Mayo 14, 2012 #

    [...] te vale la hora del cliente, tienes el siguiente ejemplo http://lineadecodigo.com/javascript/reloj-en-javascript/ Posted 1 year ago [...]

Deje un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*