Como hice un reloj bonito y fácil con Html, Css y Javascript

Podéis verlo aquí (https://alvaroartano.github.io/proyectos/clock/)

1- HTML

Para empezar, creamos un archivo html, otro css y no nos hará falta un archivo javascript ya que es muy corto, y lo escribiremos en el html mismo.

Escribimos el header y enlazamos el html con el css tal que así:

A continuación, vamos a crear un div para el reloj, y otros tres para las agujas (horas, minutos, segundos) y nos quedaría algo así.

Vale, esto es todo en el HTML, así que vamos con CSS.

2- CSS

Ok, ahora abriremos el archivo style.css (en mi caso, en vuestro caso abrir el que hayáis creado) haremos unos ajustes para que todo este bien alineado y en su sitio, y pondremos un fondo de color al body.

Después, ajustaremos el tamaño del reloj, lo alinearemos y le tendremos que poner un fondo al div. Este archivo será clock.png y lo podréis descargar desde aquí. Y luego, lo más difícil, le daremos la sombra redondeada que tiene el borde del reloj, todo junto, nos quedaría así:

Despues, ajustaremos las tres agujas de la siguiente manera:

Y a continuación, daremos tamaño y añadiremos unos ajustes para alinear las agujas:

Después, añadiremos un elemento “::before” para cada aguja, y les daremos color, un z-index, y les daremos un borde redondeado de esta manera:

Con esto, terminamos el css, y ahora empieza Javascript.

3- Javascript

Ya estamos terminando el reloj! Ya solo nos queda que se muevan las agujas! Como he dicho antes, el javascript lo añadiremos directamente al HTML, ya que es corto, y no hay necesidad de hacerlo a parte.

Para empezar, declararemos unas variables (las agujas y deg)

Después crearemos un elemento setInterval, que lo que hará será mover las agujas necesarias cada segundo. Así quedaría el setInterval + las variables anteriores:

Y casi por último, declararemos una variable con la fecha y hora actual (dentro del setInterval)

Por si no se ha entendido bien, esto hay que añadirlo al setInterval que hemos creado antes

Por último, haremos lo siguiente para que las agujas se muevan, esto lo que va a hacer será mover el eje “Z” de las agujas depende la hora, minuto y segundo que sean. Mirando el código lo entenderéis mejor (esto tambien va dentro del setInterval):

Esto se podría hacer de manera más sencilla usando librerias como jquery, pero para tan poca cosa no merecía la pena.

Y ya tenéis el reloj hecho! Si entráis al archivo “index.html” desde vuestro navegador, veréis el reloj funcionar!

Archivos finales

index.html

style.css

Reloj de ejemplo

Eso es todo! Si os ha gustado,o tenéis cualquier duda, podéis escribirme en instagram/twitter. Gracias!

Si queréis ayudarme, podéis contratar hostgator desde este link :) Gracias!