En este tutorial aprenderemos a crear un sencillo reloj en Java Scrit y HTML para insertarlo directamente en una web.
A veces puede ser de gran utilidad tener un reloj en una web o simplemente algo decorativo. Lo importante es que no consuma muchos recurso, es por ese motivo que a la hora la vamos a obtener de la computadora local y no de un servidor.
¿Cómo crear un reloj en Java Script?
Es importante mencionar que vamos a utilizar la librería jQuery pero podría no ser necesaria. La vista del reloj la podemos desarrollar con una simple etiqueta div de la siguiente manera:
<div id="reloj"></div>
Luego con Java Script Vamos a crear una función que actualice el div con la hora actual:
function actualizarReloj(){
fechaActual = new Date();
hora = fechaActual.getHours()
minuto = fechaActual.getMinutes()
segundo = fechaActual.getSeconds()
$('#reloj').text(hora + ':' + minuto + ':' + segundo);
}
Una vez creada la función que actualice la hora necesitamos que alguien la ejecute cada un segundo para que se mantenga actualizada. Esta tarea la podemos realizar usando la función setInterval de la siguiente manera:
setInterval(actualizarReloj,1000);
En la función setInterval le pasamos por parámetro la función que queremos ejecutar (sin los paréntesis) y los milisegundos.
Ese es todo el código que permite crear un reloj en Java Script y HTML actualizándose cada un segundo. Pero para que quede un poco más vistoso le podemos agregar un poco de estilo para que se vea de la siguiente manera:
A continuación les dejo el código fuente completo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reloj en Java Script</title>
<style>
body{font-family: Arial;}
#reloj{
color: white;
background: #2980b9;
width: 65px;
padding:5px;
border-radius: 5px;
text-align:center;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}
</style>
</head>
<body>
<div id="reloj"></div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$( document ).ready(function(){
//Evento que actualiza el reloj cada un segundo
setInterval(actualizarReloj,1000);
//Función para actualizar el reloj
function actualizarReloj(){
fechaActual = new Date();
hora = fechaActual.getHours()
minuto = fechaActual.getMinutes()
segundo = fechaActual.getSeconds()
$('#reloj').text(hora + ':' + minuto + ':' + segundo);
}
//Actualizamos al iniciar la página
actualizarReloj();
});
</script>
</body>
</html>
Buenos gente, espero que les haya sido útil este pequeño tutorial, y como siempre digo ante cualquier problema no dejen de enviar un comentario.
