Vamos a construir un reloj analógico en tiempo real utilizando HTML, CSS y JavaScript.
Requisito previo:
- Comprensión básica de HTML , CSS y JavaScript .
Enfoque: Crearemos tres archivos (archivo HTML, un archivo CSS y un archivo JavaScript), también tenemos una imagen del reloj que se usará en segundo plano, y además de eso, haremos una hora, minuto, y de segunda mano (utilizando HTML y CSS). Estas manos rotarán según la hora del sistema (usaremos la función Fecha predefinida de JavaScript para calcular el grado de rotación de cada mano).
- HTML: es un archivo simple que tiene la estructura básica de la página web y la identificación para el cuerpo del reloj y para las manecillas de segundos, minutos y horas.
- CSS: El CSS se usa solo para hacer que el reloj se vea un poco mejor. Básicamente, hemos centrado nuestro reloj en el medio de la página web.
- JavaScript: el archivo JavaScript proporcionará la lógica detrás de la rotación de las manos.
Ejemplo:
- Primero hemos seleccionado la hora, minuto y segundo de HTML.
- Para obtener la hora actual, hemos utilizado el objeto Date() proporcionado por JavaScript. Esto le dará los segundos, minutos y horas actuales respectivamente.
- Ahora, tenemos nuestra hora, minuto y segundo, y sabemos que el reloj gira 360 grados. Entonces, convertiremos para convertir la rotación de las manecillas del reloj en grados. El cálculo de grados se basa en un método unario simple.
index.html
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <script src="index.js"></script> </head> <body> <div id="clockContainer"> <div id="hour"></div> <div id="minute"></div> <div id="second"></div> </div> </body> </html>
style.css
#clockContainer {
position: relative;
margin: auto;
height: 40vw;
/*to make the height and width responsive*/
width: 40vw;
background: url(clock.png) no-repeat;
/*setting our background image*/
background-size: 100%;
}
#hour,
#minute,
#second {
position: absolute;
background: black;
border-radius: 10px;
transform-origin: bottom;
}
#hour {
width: 1.8%;
height: 25%;
top: 25%;
left: 48.85%;
opacity: 0.8;
}
#minute {
width: 1.6%;
height: 30%;
top: 19%;
left: 48.9%;
opacity: 0.8;
}
#second {
width: 1%;
height: 40%;
top: 9%;
left: 49.25%;
opacity: 0.8;
}
index,js
setInterval(() => {
d = new Date(); //object of date()
hr = d.getHours();
min = d.getMinutes();
sec = d.getSeconds();
hr_rotation = 30 * hr + min / 2; //converting current time
min_rotation = 6 * min;
sec_rotation = 6 * sec;
hour.style.transform = `rotate(${hr_rotation}deg)`;
minute.style.transform = `rotate(${min_rotation}deg)`;
second.style.transform = `rotate(${sec_rotation}deg)`;
}, 1000);
Imagen utilizada: https://media.geeksforgeeks.org/wp-content/uploads/20210302161254/imgonlinecomuaCompressToSizeOmNATjUMFKw-300×300.jpg
Producción:
Publicación traducida automáticamente
Artículo escrito por imsushant12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA