Hola, En este artículo vamos a desarrollar un reloj digital con HTML, CSS y Javascript. Para hacer el desarrollo necesitaremos un editor de texto como Sublime Text o Atom (ambos se pueden descargar gratuitamente) y para realizar las pruebas un navegador como Google Chrome o Firefox.

Para crear este reloj vamos a necesitar 3 archivos, uno HTML para mostrarlo, otro CSS para darle algo de estilos y por último un archivo js para programar la funcionalidad necesaria.

Comenzaremos creando un archivo llamado index.html, lo abrimos en el editor de nuestra preferencia, escribimos la estructura básica HTML más cinco etiquetas <p> para mostrar nuestro reloj.

Nuestras etiquetas <p> tienen identificadores id para poder modificarlas más tarde desde nuestro archivo javascript.

También necesitamos crear un archivo javascript llamado main.js el cual ya estamos cargando en el index.html

Luego abrimos el archivo main.js que acabamos de crear y escribimos el siguiente código javascript:

Declaramos una función llamada ActualizarHora, que más adelante va a ser la encargada de que nuestro reloj avance.

Dentro de la función utilizaremos una instancia del método Date() y le asignaremos a una variable llamada fecha, que se encarga de retornar la hora, fecha y zona horaria de nuestra computadora, por ejemplo en este momento a mi me retorna lo siguiente Mon Apr 25 2016 17:52:10 GMT-0300 (CLT), pero lo que nosotros necesitamos es extraer solamente horas, minutos y segundos.

Para lograrlo utilizaremos los métodos getSeconds(), getMinutes(), getHours() que nos entrega Date().

(más información de los métodos de Date() en http://www.w3schools.com/jsref/jsref_obj_date.asp)

El siguiente paso consiste en obtener los elementos del DOM para luego modificarlos, para eso ocuparemos document.getElementById el cual devuelve un elemento del DOM en base al id.

Con el elemento en una variable, ahora podemos proceder a modificar dinámicanete el contenido, esto lo podemos lograr con el método .textContent.

Veamos un ejemplo sencillo, si escribimos:

Dará como resultado:

<p id="viculoHoras"> JAVASCRIPT ES GENIAL </p> junto con modificar dinámicamente el HTML.

Ahora utlizaremos lo aprendido para poder cambiar la hora:

Para probar nuestro reloj podemos simplemente llamar al método ActualizarHora() desde el inspector de elementos de nuestro navegador.

reloj con HTML

Nos gustaría que la hora del reloj avance, setInterval() es un método de javascript que nos resultara muy útil para esto.

El método setInterval() recibe 2 parámetros, el primero una función o una expresión, la cual será evaluada cada vez que se completen los milisegundos que especifiquemos en el segundo parámetro (1000 ms = 1s), entonces si queremos que ActualizarHora() se ejecute cada 1 segundo para que nuestro reloj avance naturalmente, debemos poner el siguiente código por fuera de la función ActualizarHora()

Ahora vamos a agregar nuestra última funcionalidad los mensajes dependiendo de la hora. Para lograrlo agregaremos la siguiente etiqueta HTML en el archivo index.html después de los segundos y antes del script.

Para evaluar las horas a la cual se mostraran los mensajes dentro del javascript, vamos a ayudarnos de los if en el documento main.js

Declaramos la variable pSaludo, y la vinculamos con nuestra nueva etiqueta HTML con document.getElementById(contSaludo);, igual como lo hicimos para mostrar la hora.

Finalmente podemos ver el resultado:

reloj con saludo

Parte 2: Dando estilo a nuestro reloj digital

Ya tenemos un reloj funcional, pero algunos estilos CSS harán que quede mucho mejor:

Creamos un documento llamado style.css y lo relacionamos con nuestro index.html con <link rel="stylesheet" href="style.css"> justo dentro de la etiqueta <head> agregamos la etiqueta <section id="contReloj"> sobre la cual vamos a trabajar. Después de abrir style.css incluimos los siguientes estilos dentro del mismo:

Esto nos dará como resultado un reloj mucho mas vistoso y agradable a la vista.

En el presente tutorial vimos como desarrollar principalmente la funcionalidad de un reloj, se le pueden agregar muchas cosas más, por ejemplo que muestre el día, mes, año, incluir una alarma a cierta hora, etc. Tu pones los limites.

Share Button

Aspirante a desarrollador web. Todo los días pienso en como mejorar el mundo, llevo 3 años de experiencia fracasando y volviéndome a levantar que me avalan. 1% inspiración 99% transpiración.