|
63 | 63 | top:50%; |
64 | 64 | transform-origin: 100%; |
65 | 65 | transform: rotate(90deg); |
66 | | - transition: all 0.05s; |
| 66 | + transition: all 0.5s; |
67 | 67 | transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); |
68 | 68 | } |
69 | | -</style> |
70 | 69 |
|
71 | | -<script> |
72 | | - const secondHand = document.querySelector('.second-hand'); |
73 | | - const minsHand = document.querySelector('.min-hand'); |
74 | | - const hourHand = document.querySelector('.hour-hand'); |
| 70 | + </style> |
75 | 71 |
|
76 | | - function setDate() { |
77 | | - const now = new Date(); |
| 72 | + <script> |
| 73 | + const secondHand = document.querySelector('.second-hand'); |
| 74 | + const minsHand = document.querySelector('.min-hand'); |
| 75 | + const hourHand = document.querySelector('.hour-hand'); |
78 | 76 |
|
79 | | - const seconds = now.getSeconds(); |
80 | | - const secondsDegrees = ((seconds / 60) * 360) + 90; |
81 | | - secondHand.style.transform = `rotate(${secondsDegrees}deg)`; |
| 77 | + function setDate() { |
| 78 | + const now = new Date(); |
82 | 79 |
|
83 | | - const mins = now.getMinutes(); |
84 | | - const minsDegrees = ((mins / 60) * 360) + 90; |
85 | | - minsHand.style.transform = `rotate(${minsDegrees}deg)`; |
| 80 | + const seconds = now.getSeconds(); |
| 81 | + const secondsDegrees = ((seconds / 60) * 360) + 90; |
| 82 | + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; |
86 | 83 |
|
87 | | - const hour = now.getMinutes(); |
88 | | - const hourDegrees = ((mins / 12) * 360) + 90; |
89 | | - hourHand.style.transform = `rotate(${hourDegrees}deg)`; |
90 | | - } |
| 84 | + const mins = now.getMinutes(); |
| 85 | + const minsDegrees = ((mins / 60) * 360) + 90; |
| 86 | + minsHand.style.transform = `rotate(${minsDegrees}deg)`; |
91 | 87 |
|
92 | | - setInterval(setDate, 1000); |
| 88 | + const hour = now.getHours(); |
| 89 | + const hourDegrees = ((hour / 12) * 360) + 90; |
| 90 | + hourHand.style.transform = `rotate(${hourDegrees}deg)`; |
| 91 | + console.log(mins); |
| 92 | + } |
93 | 93 |
|
94 | | -</script> |
| 94 | + setInterval(setDate, 1000); |
| 95 | + </script> |
95 | 96 | </body> |
96 | 97 | </html> |
0 commit comments