Como Crear un Reloj Digital (Numérico) con JavaScript

4 minuto(s)

Demo Github

Con JavaScript se han creado cosas geniales, hasta la fecha de este Post sigue siendo el Lenguaje de Programación que esta presente en toda interface de usuario Front, vamos a crear un reloj que use la hora del sistema, es decir la hora actual de la computador del usuario, el reloj va tener números que estarán compuestos por la hora, minutos y segundos, es decir un reloj numérico, vamos con este Post. 

Antes de continuar te invito a leer los siguiente artículos:

Asimismo te invito a escuchar el Podcast: “Consejos Para Tener Más Tiempo Para Programar”:

Spotify: Sound Cloud: Apple Podcasts

Bien ahora continuemos con el Post: Como Crear un Reloj Digital (Numérico) con JavaScript.

HTML

Para crear nuestro reloj aplicaremos un poco de CSS, obviamente HTML y JavaScript, en cuanto al HTML solamente voy a necesitar una capa contenedora o div que mediante el evento on load me cargue mi función JavaScript que mostrará el reloj numérico.


El codigo HTML anterior es lo único que necesitaré para mostrar el reloj, la mayoría del trabajo lo hará JavaScript.

JavaScript

El Lenguaje de Programación JavaScript cuenta con el objeto Date() que nos devuelve la fecha y hora actual, luego extraemos solamente la hora con los minutos y segundos actuales. Con los datos obtenidos podemos personalizar como se mostrará el reloj, en el código he colocado comentarios para explicar que hace cada pare del código JavaScript.


Ahora le aplico unas propiedades CSS para darle un mejor aspecto.

CSS

A mi capa contenedora le puse el nombre de clase reloj, voy a usar ese nombre de clase para aplicarle las siguientes propiedades CSS  darle un mejor aspecto al reloj.


Si voy al navegador, debería de verse el reloj de la siguiente manera.

El reloj corre y muestra la hora el minuto y segundo en tiempo real, al inicio de este tutorial he colocado una Demo en donde puedes ver el reloj en acción y también he colocado el código fuente en un repositorio GitHub para que lo puedas descargar.

Conclusión

Hemos aprendido a crear un reloj numérico con JavaScript, una vez creado el reloj podemos personalizarlo según las necesidades que tengamos.

Nota (s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.