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.
|
Manuales relacionados con este artículo
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>
| Comentarios sin revisar |
|
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
|
Se ha encontrado un comentario sin revisar
Ir arriba