En este artículo, vamos a crear un reloj analógico . Esto se basa principalmente en HTML, CSS y Vanilla JavaScript.
Acercarse:
- Cree un archivo HTML en el que vamos a agregar el div principal, más adelante agregaremos 4 etiquetas div para una hora, minuto, segundero y para el pin.
- Cree un archivo CSS para diseñar nuestra página web y para asignar diferentes longitudes a las diferentes manos.
- Cree un archivo JavaScript para crear una breve lógica para la rotación de diferentes manecillas del reloj.
Lógica para la rotación de las manecillas del reloj:
1. Manecilla de la hora
For Achieving 12hrs,
hour hand moves 360deg.
i.e. 12hrs ⇢ 360degs
so, 1hr ⇢ 30degs
and, 60mins ⇢ 30degs
so, 1min ⇢ 0.5degs
Total Rotation of hour hand:
(30deg * hrs) + (0.5deg * mins)
2. Manecilla de minutos
For Achieving 60mins,
hour hand moves 360deg.
i.e. 60mins ⇢ 360degs
so, 1min ⇢ 6degs
Total Rotation of minute hand:
6deg * mins
3. Segunda Mano
For Achieving 60secs,
hour hand moves 360deg.
i.e. 60secs ⇢ 360degs
so, 1sec ⇢ 6degs
Total Rotation of minute hand:
6deg * secs
Código HTML:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Analog Clock</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="clock"> <div class="hr"></div> <div class="min"></div> <div class="sec"></div> <div class="pin"></div> </div> <script src="index.js"></script> </body> </html>
Explicación del código:
- Primero, cree un archivo HTML (index.html).
- Ahora, después de la creación de nuestro archivo HTML, le daremos un título a nuestra página web usando la etiqueta <title>. Debe colocarse dentro de la sección <head>.
- Luego vinculamos el archivo CSS que proporciona todos los estilos a nuestro HTML. Esto también se coloca entre la etiqueta <head>.
- Llegando a la sección del cuerpo de nuestro código HTML.
- En primer lugar, cree un div principal como un reloj.
- En ese div agregue 4divs para una hora, minuto, segundero y para el pin.
- Al final de nuestro cuerpo, agregue la etiqueta <script> que vincula el archivo JS con nuestro archivo HTML.
Código CSS:
/* Restoring browser effects */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
;
}
/* All of the same styling to the body */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
background-image: linear-gradient(
70deg, black, white);
}
/* Sizing, positioning of main
dial of the clock */
.clock {
width: 40vw;
height: 40vw;
background-image: linear-gradient(
70deg, black, white);
background-size: cover;
box-shadow: 0 3em 5.8em;
border-radius: 50%;
position: relative;
}
.hr,
.min,
.sec {
width: 1%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
transform-origin: bottom;
z-index: 2;
border-radius: 2em;
}
.pin {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 1em;
height: 1em;
background: rgb(38, 0, 255);
border: 2px solid #ffffff;
border-radius: 10em;
margin: auto;
z-index: 10;
}
/* Different length of different hands of clock */
.hr {
height: 25%;
background-color: #ff0000;
}
.min {
height: 30%;
background-color: #ff9900;
}
.sec {
height: 40%;
background-color: #99ff00;
transform-origin: 50% 85%;
}
Explicación del código: CSS se usa para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que parezca interactiva para todos los usuarios. En CSS, tenemos que incluir los siguientes puntos:
- Restaura todos los efectos del navegador.
- Use clases e identificaciones para dar efectos a los elementos HTML.
Código JS:
Javascript
// Selecting all of the css classes on which
// we want to apply functionalities
const hr = document.querySelector('.hr')
const min = document.querySelector('.min')
const sec = document.querySelector('.sec')
// Setting up the period of working
setInterval(() => {
// Extracting the current time
// from DATE() function
let day = new Date()
let hour = day.getHours()
let minutes = day.getMinutes()
let seconds = day.getSeconds()
// Formula that is explained above for
// the rotation of different hands
let hrrotation = (30 * hour) + (0.5 * minutes);
let minrotation = 6 * minutes;
let secrotation = 6 * seconds;
hr.style.transform =
`translate(-50%,-100%) rotate(${hrrotation}deg)`
min.style.transform =
`translate(-50%,-100%) rotate(${minrotation}deg)`
sec.style.transform =
`translate(-50%,-85%) rotate(${secrotation}deg)`
});
Explicación del código:
- La función setInterval() se utiliza para la ejecución de la función durante un período de tiempo específico. Para más detalles haga clic aquí .
- La función Fecha() se usa para devolver la fecha de hoy, la hora actual (horas, minutos, segundos).
Código completo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Restoring browser effects */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* All of the same styling to the body */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
background-image: linear-gradient(
70deg, black, white);
}
/* Sizing, positioning of main dial of the clock */
.clock {
width: 40vw;
height: 40vw;
background-image: linear-gradient(
70deg, black, white);
background-size: cover;
box-shadow: 0 3em 5.8em;
border-radius: 50%;
position: relative;
}
.hr,
.min,
.sec {
width: 1%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
transform-origin: bottom;
z-index: 2;
border-radius: 2em;
}
.pin {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 1em;
height: 1em;
background: rgb(38, 0, 255);
border: 2px solid #ffffff;
border-radius: 10em;
margin: auto;
z-index: 10;
}
/* Different length of different hands of clock */
.hr {
height: 25%;
background-color: #ff0000;
}
.min {
height: 30%;
background-color: #ff9900;
}
.sec {
height: 40%;
background-color: #99ff00;
transform-origin: 50% 85%;
}
</style>
</head>
<body>
<div class="clock">
<div class="hr"></div>
<div class="min"></div>
<div class="sec"></div>
<div class="pin"></div>
</div>
<script>
// Selecting all of the css classes
// on which we want to apply functionalities
const hr = document.querySelector('.hr')
const min = document.querySelector('.min')
const sec = document.querySelector('.sec')
// Setting up the period of working
setInterval(() => {
// Extracting the current time
// from DATE() function
let day = new Date()
let hour = day.getHours()
let minutes = day.getMinutes()
let seconds = day.getSeconds()
// Formula that is explained above for
// the rotation of different hands
let hrrotation = (30 * hour) + (0.5 * minutes);
let minrotation = 6 * minutes;
let secrotation = 6 * seconds;
hr.style.transform =
`translate(-50%,-100%) rotate(${hrrotation}deg)`
min.style.transform =
`translate(-50%,-100%) rotate(${minrotation}deg)`
sec.style.transform =
`translate(-50%,-85%) rotate(${secrotation}deg)`
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA