├── index.html ├── script.js └── styles.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Clock 10 | 11 | 12 |
13 |
14 |
15 |
16 |
1
17 |
2
18 |
3
19 |
4
20 |
5
21 |
6
22 |
7
23 |
8
24 |
9
25 |
10
26 |
11
27 |
12
28 |
29 | 30 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | setInterval(setClock, 1000) 2 | 3 | const hourHand = document.querySelector('[data-hour-hand]') 4 | const minuteHand = document.querySelector('[data-minute-hand]') 5 | const secondHand = document.querySelector('[data-second-hand]') 6 | 7 | function setClock() { 8 | const currentDate = new Date() 9 | const secondsRatio = currentDate.getSeconds() / 60 10 | const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60 11 | const hoursRatio = (minutesRatio + currentDate.getHours()) / 12 12 | setRotation(secondHand, secondsRatio) 13 | setRotation(minuteHand, minutesRatio) 14 | setRotation(hourHand, hoursRatio) 15 | } 16 | 17 | function setRotation(element, rotationRatio) { 18 | element.style.setProperty('--rotation', rotationRatio * 360) 19 | } 20 | 21 | setClock() -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | *, *::after, *::before { 2 | box-sizing: border-box; 3 | font-family: Gotham Rounded, sans-serif; 4 | } 5 | 6 | body { 7 | background: linear-gradient(to right, hsl(200, 100%, 50%), hsl(175, 100%, 50%)); 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | overflow: hidden; 13 | } 14 | 15 | .clock { 16 | width: 300px; 17 | height: 300px; 18 | background-color: rgba(255, 255, 255, .8); 19 | border-radius: 50%; 20 | border: 2px solid black; 21 | position: relative; 22 | } 23 | 24 | .clock .number { 25 | --rotation: 0; 26 | position: absolute; 27 | width: 100%; 28 | height: 100%; 29 | text-align: center; 30 | transform: rotate(var(--rotation)); 31 | font-size: 1.5rem; 32 | } 33 | 34 | .clock .number1 { --rotation: 30deg; } 35 | .clock .number2 { --rotation: 60deg; } 36 | .clock .number3 { --rotation: 90deg; } 37 | .clock .number4 { --rotation: 120deg; } 38 | .clock .number5 { --rotation: 150deg; } 39 | .clock .number6 { --rotation: 180deg; } 40 | .clock .number7 { --rotation: 210deg; } 41 | .clock .number8 { --rotation: 240deg; } 42 | .clock .number9 { --rotation: 270deg; } 43 | .clock .number10 { --rotation: 300deg; } 44 | .clock .number11 { --rotation: 330deg; } 45 | 46 | .clock .hand { 47 | --rotation: 0; 48 | position: absolute; 49 | bottom: 50%; 50 | left: 50%; 51 | border: 1px solid white; 52 | border-top-left-radius: 10px; 53 | border-top-right-radius: 10px; 54 | transform-origin: bottom; 55 | z-index: 10; 56 | transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg)); 57 | } 58 | 59 | .clock::after { 60 | content: ''; 61 | position: absolute; 62 | background-color: black; 63 | z-index: 11; 64 | width: 15px; 65 | height: 15px; 66 | top: 50%; 67 | left: 50%; 68 | transform: translate(-50%, -50%); 69 | border-radius: 50%; 70 | } 71 | 72 | .clock .hand.second { 73 | width: 3px; 74 | height: 45%; 75 | background-color: red; 76 | } 77 | 78 | .clock .hand.minute { 79 | width: 7px; 80 | height: 40%; 81 | background-color: black; 82 | } 83 | 84 | .clock .hand.hour { 85 | width: 10px; 86 | height: 35%; 87 | background-color: black; 88 | } --------------------------------------------------------------------------------