Reloj analógico pequeño en JavaScript puro
| Autor: | niloofarfs |
|---|---|
| Views Total: | 3,021 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 26, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Utilice JavaScript y CSS para crear un pequeño reloj analógico en la Página Web.
Funcionamiento
Incluya el archivo analogClock. js en la página HTML.
<script src="analogClock.js"></script>
El HTML para insertar el reloj analógico en la Página Web.
<body onload="rClock()"> <div class="container"> <div class="clock"> <div class="h-hand" id="hour"> </div> <div class="m-hand" id="min"> </div> <div class="s-hand" id="sec"> </div> </div> </div> </body>
Los estilos CSS primarios.
.clock {
position: relative;
background-image: url('images/e-clock.png');
width: 500px;
height: 500px;
background-size: contain;
}
.h-hand {
position: absolute;
left: 240px;
top: 155px;
background-image: url('images/hour.png');
height: 100px;
width: 20px;
background-size: 20px 100px;
transform-origin: 50% 95%;
}
.m-hand {
position: absolute;
left: 240px;
top: 80px;
background-image: url('images/min.png');
height: 180px;
width: 20px;
background-size: 20px 180px;
transform-origin: 50% 95%;
}
.s-hand {
position: absolute;
left: 237px;
top: 80px;
background-image: url('images/sec-e.png');
height: 180px;
width: 30px;
background-size: 30px 180px;
transform-origin: 45% 95%;
}
