Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Reloj en Javascript


Aprendemos a crear un reloj sencillo mediante Javascript y le aplicamos algunas mejoras.


04/10/01 - Vamos a ver un taller práctico sobre Javascript con el cual podremos incluir un reloj en nuestra página web. Es un sencillo script, que podremos colocar con tan sólo cortar y pegar, aunque procuraremos explicarlo un poco para los que estén en condiciones de entender Javascript.

Para empezar, vamos a ver el relojito que pretendemos crear:

Es un reloj muy sencillito de manera intencionada, para que podamos entender bien el ejercicio. Luego lo complicaremos un poco más para darle algo de vistosidad.

Construir el formulario

Empezamos por colocar el campo de texto donde se mostrará el reloj. Debemos colocar un pequeño formulario donde tan solo tendremos un campo de texto.

<form name="form_reloj">
<input type="text" name="reloj" size="10">
</form>


No debería haber ningún problema en estas líneas de HTML. Sólo colocamos las etiquetas de inicio y final del formulario y dentro un campo de texto. Tanto al formulario como al campo de texto les asignamos un nombre para luego accederlos por ese nombre mediante Javascript.

Función para actualizar el valor del reloj

Tenemos que construir una función que recoja la hora del sistema y la muestre en el campo de texto.

Para tomar la hora vamos a hacer uso del objeto Date de Javascript.

momentoActual = new Date()

Si creamos una nueva instancia del objeto Date sin pasarle parámetros se inicializa a la fecha y hora actuales.

Luego tenemos que obtener de esa instancia de Date lo que nos interesa, que es la hora, los minutos y segundos. Esto lo hacemos utilizando los correspondientes métodos del objeto Date.

hora = momentoActual.getHours()
minuto = momentoActual.getMinutes()
segundo = momentoActual.getSeconds()


Ahora combinamos los resultados para construir la hora con el formato que deseamos.

horaImprimible = hora + " : " + minuto + " : " + segundo

Por último colocamos en el campo de texto del formulario el valor actual de la hora.

document.form_reloj.reloj.value = horaImprimible

Por ahora la función queda de esta manera:

function mueveReloj(){
    momentoActual = new Date()
    hora = momentoActual.getHours()
    minuto = momentoActual.getMinutes()
    segundo = momentoActual.getSeconds()

    horaImprimible = hora + " : " + minuto + " : " + segundo

    document.form_reloj.reloj.value = horaImprimible
}


La función debe llamarse a si misma

Con estas líneas de código obtenemos la hora y la actualizamos en su campo de texto, pero no está hecho todo, necesitamos que esa función se llame constantemente y cada segundo para que actualice el valor de nuestro campo de texto constantemente también.

Para ello, lo mejor es que la función se encargue también de llamarse a si misma al cabo de un segundo, así volverá a hacer todo el proceso de obtención y actualización de la hora y por último se llamará a si misma al cabo de un segundo. Este proceso se repetirá por siempre hasta que nos salgamos de la página.

La línea de código para llamarse a si misma, que colocaremos en la última línea de la función es la siguiente:

setTimeout("mueveReloj()",1000)

La función setTimeout sirve para hacer el retardo antes de ejecutar la sentencia. La sentencia es una simple llamada a la función y el retardo es de 1000 milisegundos (un segundo).

Poner en marcha el reloj

Finalmente necesitamos poner el reloj en marcha. Esto lo podemos hacer una vez acabada la carga de la página con el manejador de eventos onload, que se coloca en el <body>.

<body onload="mueveReloj()">

Esto quiere decir que cuando se termine de cargar la página se llame a la función mueveReloj(), que se encargará de mover el reloj y llamarse a si misma para hacer el proceso de manera continuada.

Código entero

El código de la página queda de esta manera:

<html>
<head>
<title>Reloj con Javascript</title>
<script language="JavaScript">
function mueveReloj(){
    momentoActual = new Date()
    hora = momentoActual.getHours()
    minuto = momentoActual.getMinutes()
    segundo = momentoActual.getSeconds()

    horaImprimible = hora + " : " + minuto + " : " + segundo

    document.form_reloj.reloj.value = horaImprimible

    setTimeout("mueveReloj()",1000)
}
</script>
</head>

<body onload="mueveReloj()">

Vemos aquí el reloj funcionando...

<form name="form_reloj">
<input type="text" name="reloj" size="10">
</form>

</body>
</html>


Añadidos al reloj

Podemos hacer muchas cosas para mejorar aspectos de este reloj. Por ejemplo darle un poco de estilo al campo de texto o hacer que nadie se pueda posar encima del campo de texto para actualizar manualmente el valor de la hora. Vamos a ver alguna cosilla.

Estilo al reloj

Con hojas de estilo podemos cambiar la apariencia del reloj para hacerlo un poco más especial. Este es un ejemplo de lo que se podría poner.

<input type="text" name="reloj" size="10" style="background-color : Black; color : White; font-family : Verdana, Arial, Helvetica; font-size : 8pt; text-align : center;">

Evitar que accedan al campo de texto

Así nadie podrá modificar el texto del reloj manualmente. Lo conseguimos con Javascript. El manejador de eventos onfocus se activa cuando el campo de texto adquiere el foco de la aplicación. En ese momento nosotros sacaremos el foco de la aplicación con el método blur(). El botón quedaría así:

<input type="text" name="reloj" size="10" onfocus="window.document.form_reloj.reloj.blur()">

Hacer que siempre tengamos dos digitos en la hora minutos y segundos.

Para conseguir que la hora tenga siempre un formato hh : mm : ss debemos jugar un poco con los valores de tiempo como si fueran strings. Para ello lo primero que tendremos que hacer es construir un string a partir del valor (hora, minuto o segundo) que queramos formatear. Luego observaremos ese string para saber si tenemos que añadirle un dígito al valor.

Veamos cómo obtenemos el string a partir del número de segundos obtenido. Lo hacemos para los segundos, la hora y los minutos serán realizados de manera similar.

str_segundo = new String (segundo)

Seguidamente observamos si tenemos un solo carácter en el string, porque si es así le tenemos que concatenar un cero ("0") al principio.

if (str_segundo.length == 1)
segundo = "0" + segundo


Todo junto

Veamos otra vez nuestro ejemplo en una sola pieza para ver cómo quedan todas estas mejoras.

<html>
<head>
<title>Reloj con Javascript</title>
<script language="JavaScript">
function mueveReloj(){
    momentoActual = new Date()
    hora = momentoActual.getHours()
    minuto = momentoActual.getMinutes()
    segundo = momentoActual.getSeconds()

    str_segundo = new String (segundo)
    if (str_segundo.length == 1)
       segundo = "0" + segundo

    str_minuto = new String (minuto)
    if (str_minuto.length == 1)
       minuto = "0" + minuto

    str_hora = new String (hora)
    if (str_hora.length == 1)
       hora = "0" + hora

    horaImprimible = hora + " : " + minuto + " : " + segundo

    document.form_reloj.reloj.value = horaImprimible

    setTimeout("mueveReloj()",1000)
}
</script>
</head>

<body onload="mueveReloj()">

Vemos aquí el reloj funcionando...

<form name="form_reloj">
<input type="text" name="reloj" size="10" style="background-color : Black; color : White; font-family : Verdana, Arial, Helvetica; font-size : 8pt; text-align : center;" onfocus="window.document.form_reloj.reloj.blur()">
</form>

</body>
</html>


Este segundo reloj lo podemos ver a continuación.

Si lo deseamos podemos abrir una página web para visualizar:

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada
+ 7 comentarios (Añadir)
+ 1 comentario no revisado

 Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Taller de Javascript

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Scripts en Javascript


 Comentarios de los visitantes
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
Se muestran 7 comentarios revisados

 Comentario de DAN
01/3/04 
Sólo para evitar algo de código en el script del reloj...
<html>
<head>
<title>Reloj con Javascript</title>
<script language="JavaScript">
function mueveReloj(){
    momentoActual = new Date();
    hora = momentoActual.getHours();
    minuto = momentoActual.getMinutes();
    segundo = momentoActual.getSeconds();

    str_segundo = new String (segundo)
    if (str_segundo.length == 1)
       segundo = "0" + segundo;

    str_minuto = new String (minuto)
    if (str_minuto.length == 1)
       minuto = "0" + minuto;

    str_hora = new String (hora)
    if (str_hora.length == 1)
       hora = "0" + hora;

    horaImprimible = hora + ":" + minuto + ":" + segundo;

    cl.innerHTML = horaImprimible;

    setTimeout("mueveReloj()",1000);
}
</script>
</head>

<body onload="mueveReloj()">

<table width="98" border="2" cellpadding="2" cellspacing="2" bordercolor="#FFFFFF" bgcolor="#000000">
    <tr>
       <th width="86" scope="col"><font id="cl" color="#ffffff"><strong>0</strong></font></th>
    </tr>
</table>
</body>
</html>

 Comentario de dan
03/3/04 
Este código aunque más largo nos evita la hora militar osea 13, 14, 20, etc... y en ves de eso nos muestra lo referente a el horario 01:00:00 a.m o bien 01:00:00 p.m. dependiendo en que momento este, podemos hacer tambien mensajes personalizados dependiendo de los horarios mayor o igual a las 12 y menor a las 7 //buenas tarde, mayor o igual a las 7 de la noche// buenas noche de lo contrario buenos días

<html>
<head>
<title>Reloj con Javascript</title>
<script language="JavaScript">
var m="A.M.";
function mueveReloj(){
    momentoActual = new Date();
    hora = momentoActual.getHours();
    minuto = momentoActual.getMinutes();
    segundo = momentoActual.getSeconds();

if(hora==12)
{
    m="M.D.";
}
if(hora==13)
{
    hora="0"+1;
    m="P.M.";
}
if(hora==14)
{
    hora="0"+2;
    m="P.M.";
}
if(hora==15)
{
    hora="0"+3;
    m="P.M.";
}
if(hora==16)
{
    hora="0"+4;
    m="P.M.";
}
if(hora==17)
{
    hora="0"+5;
    m="P.M.";
}
if(hora==18)
{
    hora="0"+6;
    m="P.M.";
}
if(hora==19)
{
    hora="0"+7;
    m="P.M.";
}
if(hora==20)
{
    hora="0"+8;
    m="P.M.";
}
if(hora==21)
{
    hora="0"+9;
    M="P.M.";
}
if(hora==22)
{
    hora=10;
    m="P.M.";
}
if(hora==23)
{
    hora=11;
    m="P.M.";
}
if((hora==0)||(hora==24))
{
    hora=12;
    m="M.N";
}

    str_segundo = new String (segundo)
    if (str_segundo.length == 1)
       segundo = "0" + segundo;

    str_minuto = new String (minuto)
    if (str_minuto.length == 1)
       minuto = "0" + minuto;

    str_hora = new String (hora)
    if (str_hora.length == 1)
       hora = "0" + hora;

    horaImprimible = hora + ":" + minuto + ":" + segundo+" "+m;

    cl.innerHTML = horaImprimible;//cl=clock=reloj

    setTimeout("mueveReloj()",1000);
}
</script>
</head>

<body onload="mueveReloj()">

<table width="128" border="2" cellpadding="2" cellspacing="2" bordercolor="#FFFFFF" bgcolor="#000000">
    <tr>
    <th width="114" scope="col"><font id="cl" color="#ffffff"><strong>0</strong></font></th>
    </tr>
</table>
</body>
</html>

 Comentario de Jaevi
08/8/05 
Me hacía falta un reloj en javascript. Y por no buscar alguno que ya tubiera yo ya hecho... pues lo busqué y encontré el artículo de esta página.

Cierto que aparece el problema de que cuando los minutos/segundos (la hora da igual, creo yo) son de un sólo dígito habría que poner un 0 delante.

Termine de leer el articulo (con la primera parte me bastaba y ya solucionaria yo lo del primer dígito) y vi la solución que se aportaba:

str_segundo = new String (segundo)
if (str_segundo.length == 1)
segundo = "0" + segundo

y otro igual para los minutos.

Realmente funciona pero... en vez de crear una nueva variable tipo string y medirla... no sería mas facil algo asi:

if (segundo < 10)
segundo = "0" + segundo;

si es menor de 10, pues le pones un 0 delante.

Desde mi punto de vista es mas fácil, no hay que crear mas variables y se ve más facil

 Comentario de Miguel Angel
09/8/05 
A raíz del comentario anterior, en el que propone otro código más sencillo para poner un -0- si los minutos o las horas son menores que 10.

Ese código que propones está bien y entiendo que te parezca más sencillo... A mi también puede parecérmelo.

El que había utilizado yo en el artículo es más "académico" (mas correcto desde el punto de vista de un programador) porque utiliza una variable tipo string para concatenar otro string.

Por contra, tu código, concatena un string con un número. Esto en javascript es perfectamente correcto, porque internamente hace una conversión del número en un string para concatenarlo con otro string. En otros lenguajes de programación no se pueden concatenar números con strings, sólo permiten concatenar strings entre si y no te hacen automáticamente las conversiones necesarias para hacer la concatenación.


 Comentario de ElectroniX
31/7/06 
Sobre el comentario sobre como poner la hora del servidor en vez de la del cliente:

Yo no se mucho de javaScript, pero he encontrado que dreamweaver al abrir el tag <script> me figura una opcion runat. al colocarla me dice que puedo colocar server. podrìa ser eso?
es decir que el codigo quedaría:

<script ....... runat="server">

por otro lado, puedo aonsejar usar php, ya que este codigo se ejecuta directamente en el server. a su vez puedes introducir las variables usadas en php directamente sobre el script java, de esta manera generarías no solo un script y una pagina dinamica, sino todo un script dinamico, cambiando por decirlo de alguna manera facil, las variables del mismo script.

por otra parte quiciera aconsejar para los menos expertos:
se pueden colocar los codigos en un archivo .js y luego importarlo en el html con el tag <script> por ej
<script src="blabla.js"........>
de esta manera se obtiene un codigo mas limpio en la web, facilitando la lectura, pero a la vez impidiendo que la gente lea directamente el codigo colocando "ver codigo de fuente" (Este no es un medio de seguridad muy alta, ya que si en la direccion del explorador colocal la ubicacion del archivo .js obtendran un download del archivo, y dicha ubicación si saldrá en el codigo html).

Me despido diciendo que cuenten conmigo para cualquier consulta

Mi mail y msn es : richardcristiang@gmail.com

Saludos a todos

 Comentario de Evián Suárez
29/9/06 
Para no ver la hora militar y no insertar tantos "if" como en los comentarios pasados creo que con esta sentencia ya se resuelve ese problema:

if(hora>=12 && hora<=23)
m="P.M";
else
m="A.M";

 Comentario de Alien
22/2/07 
Hola a todos, este código para reloj me ha parecido algo bueno como para insertarlo en mi Web, solo que jugando un poco con las líneas del fuente he podido destacar algo en cuanto a presentación pero en si el código podría ser mejorado y evitando un tanto las complicaciones en cuanto a los Strings. A continuación detallo el código del reloj con algunas modificaciones que especifican el día, mes y año…
A y por cierto una duda si alguien podría responderla se puede en algunos de los casos insertar dos códigos de tipo onload en el fuente de una página Web… Siendo que tuviera insertado el reloj y quisiera insertar un cronometro.
Contactos al milenuim_f@hotmail.com

CODIGO DEL RELOJ:

<htm>
<head>
</head>
<body>
<script language="JavaScript">
function Reloj(){
A = new Date()
dateText = ""
hora = A.getHours()
minuto = A.getMinutes()
segundo = A.getSeconds()

// Tomar el dia actual y convertirlo al espanol
dayValue = A.getDay()
if (dayValue == 0)
dateText += "Domingo"
else if (dayValue == 1)
dateText += "Lunes"
else if (dayValue == 2)
dateText += "Martes"
else if (dayValue == 3)
dateText += "Miercoles"
else if (dayValue == 4)
dateText += "Jueves"
else if (dayValue == 5)
dateText += "Viernes"
else if (dayValue == 6)
dateText += "Sabado"

// tomar el mes actual y convertirlo a meses en espanol
monthValue = A.getMonth()
dateText += " "
if (monthValue == 0)
dateText += "Enero"
if (monthValue == 1)
dateText += "Febrero"
if (monthValue == 2)
dateText += "Marzo"
if (monthValue == 3)
dateText += "Abril"
if (monthValue == 4)
dateText += "Mayo"
if (monthValue == 5)
dateText += "Junio"
if (monthValue == 6)
dateText += "Julio"
if (monthValue == 7)
dateText += "Agosto"
if (monthValue == 8)
dateText += "Septiembre"
if (monthValue == 9)
dateText += "Octubre"
if (monthValue == 10)
dateText += "Noviembre"
if (monthValue == 11)
dateText += "Diciembre"

// Para visualizar el ano, si es antes del 2000
if (A.getYear() < 2000)
dateText += " " + A.getDate() + ", " + (1900 + A.getYear())
else
dateText += " " + A.getDate() + ", " + (A.getYear())

// Para visualizar la forma como se mira el tiempo
if (segundo < 10)
segundo = "0" + segundo;

if (minuto < 10)
minuto = "0" + minuto;

if (hora < 10)
hora = "0" + hora;

if (hora < 12)
{
greeting="BUENOS DIAS!"
timeText=greeting + " " + hora + ":" + minuto + ":" + segundo + " AM "
}
else if(hora == 12)
{
greeting="BUENAS TARDES!"
timeText=greeting + " " + hora + ":" + minuto + ":" + segundo + " PM "
}
else if(hora < 18)
{
greeting="BUENAS TARDES!"
timeText=greeting + " " + hora + ":" + minuto + ":" + segundo + " PM "
}
else
{
greeting="BUENAS NOCHES!"
timeText=greeting + " " + hora + ":" + minuto + ":" + segundo + " PM "
}

horaImprimible = timeText + "Bienvenidos a DesarrolloWeb.com " + dateText

document.form_reloj.reloj.value = horaImprimible

setTimeout("Reloj()",1000)

}

</script>

<p align=center>
<body onload="Reloj()">

<form name="form_reloj">
<input type="text" name="reloj" size="85" style="background-color : Green; ; color : Lime; font-family : Arial; font-size : 10pt; text-align : center;">
</form>
</body>
</htm>

Añadir un comentario al artículo Añadir un comentario del artículo
 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se ha encontrado un comentario sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Taller de Javascript
Categorías
+Scripts en Javascript

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia