Reloj analógico con JavaScript y SCSS
| Autor: | vishal-wadhwa |
|---|---|
| Views Total: | 758 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 8, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Un simple y ligero reloj analógico construido con JavaScript y CSS/SCSS.
Funcionamiento
Cree el HTML para el reloj analógico.
<div class="clock"> <div class="clock__hours-hand" id="hours-hand"></div> <div class="clock__minutes-hand" id="minutes-hand"></div> <div class="clock__seconds-hand" id="seconds-hand"></div> <span class="clock__hand-pivot" id="hand-pivot"></span> <span class="clock__dial-hour">1</span> <span class="clock__dial-hour">2</span> <span class="clock__dial-hour clock__dial-hour--main">3</span> <span class="clock__dial-hour">4</span> <span class="clock__dial-hour">5</span> <span class="clock__dial-hour clock__dial-hour--main">6</span> <span class="clock__dial-hour">7</span> <span class="clock__dial-hour">8</span> <span class="clock__dial-hour clock__dial-hour--main">9</span> <span class="clock__dial-hour">10</span> <span class="clock__dial-hour">11</span> <span class="clock__dial-hour clock__dial-hour--main">12</span> </div>
Importa el JavaScript principal en el proyecto.
<script src="index.js"></script>
Personalice el reloj analógico en el SCSS.
$primary: black; $primary-2: white; $secondary: gray; $accent: red; $clock-border: 10px;
