Reloj digital con js
Programación web
Crear un reloj que se actualiza en la web
Del lenguaje Javascript he ido hablando tanto en otro portfolio donde creé una alerta que pide el nombre al usuario, y también en una entrada de blog sobre la importancia de este lenguaje para crear contenido dinámico en una página web, por eso hoy traigo un reloj digital que siempre va a ir a la hora.
El javascript le da ese dinamismo para que el reloj funcione, pero necesitas CSS para darle un poco de estilo y que no se vean solo números «corriendo». Si sentís curiosidad por el código que he utilizado, aquí os lo dejo:
Código HTML para integrar el reloj digital en nuestra página
El html es un simple div (contenedor) que tiene como identificador o ID la palabra reloj. Como he comentado en otras ocasiones, a la ID la puedes llamar como quieras, pero OJO ya que de esta ID depende el código Javascript, así que si cambias el nombre, recuerda modificar el Javascript.
Código CSS para dar «vidilla» y estilo a nuestro reloj digital
El CSS siempre me ha parecido la parte más divertida, así que no he podido evitar integrarlo aquí también. Podéis ver que tiene elementos básicos y comunes como fondo (background), padding para darle aire, aumento de la fuente utilizada y ajuste del tamaño de este div.
Código Javascript para el reloj digital
Aclaración ante dudas: La expresión (hours < 10) ? «0» + hours : hours está destinada a agregar un cero delante de las horas si son menores que 10, para mantener el formato de dos dígitos para las horas (por ejemplo, 01, 02, 03, …, 09) que es el típico de los relojes digitales.
Recuerda que lo importante es comprender como funciona un lenguaje y seguir practicando para dominarlo poco a poco. Iré subiendo más tutoriales y ejercicios para continuar practicando y también para mostrar la magia de Javascript.
