| 1 | function getAngle(){ |
| 2 | //Get hand Elements |
| 3 | const hourHand = document.querySelector('.hour'); |
| 4 | const minuteHand = document.querySelector('.minute'); |
| 5 | const secondHand = document.querySelector('.second'); |
| 6 | |
| 7 | //hours, minutes and seconds |
| 8 | const today = new Date(); //Date object |
| 9 | let hours = today.getHours(); |
| 10 | let minutes = today.getMinutes(); |
| 11 | let seconds = today.getSeconds(); |
| 12 | |
| 13 | // angle of rotation of hands |
| 14 | let hrHandRotation = 30*hours + minutes/2 + seconds/120; |
| 15 | let minHandRotation = 6*minutes + seconds/10; |
| 16 | let secHandRotation = 6*seconds; |
| 17 | |
| 18 | //now rotate the hands |
| 19 | //adding translateX here otherwise only rotate works |
| 20 | hourHand.style.transform = `translateX(-50%) rotate(${hrHandRotation}deg)`; |
| 21 | minuteHand.style.transform = `translateX(-50%) rotate(${minHandRotation}deg)`; |
| 22 | secondHand.style.transform = `translateX(-50%) rotate(${secHandRotation}deg)`; |
| 23 | } |
| 24 | |
| 25 | getAngle(); //to start the clock as soon as page loads otherwise it jumps to current time abruptly form 12 |
| 26 | |