File tree Expand file tree Collapse file tree 1 file changed +23
-0
lines changed Expand file tree Collapse file tree 1 file changed +23
-0
lines changed Original file line number Diff line number Diff line change 61
61
background : black;
62
62
position : absolute;
63
63
top : 50% ;
64
+ transform-origin : 100% ;
65
+ transform : rotate (90deg );
66
+ transition : all 0.05s ;
67
+ transition-timing-function : cubic-bezier (0.1 , 2.7 , 0.58 , 1 )
64
68
}
65
69
66
70
</ style >
67
71
68
72
< script >
73
+ const secondHand = document . querySelector ( '.second-hand' )
74
+ const minuteHand = document . querySelector ( '.min-hand' )
75
+ const hourHand = document . querySelector ( '.hour-hand' )
69
76
77
+ function setDate ( ) {
78
+ const now = new Date ( ) ;
79
+
80
+ const seconds = now . getSeconds ( )
81
+ const secondsDegrees = ( ( seconds / 60 ) * 360 ) + 90 ;
82
+ secondHand . style . transform = `rotate(${ secondsDegrees } deg)` ;
83
+
84
+ const minutes = now . getMinutes ( )
85
+ const minutesDegrees = ( ( minutes / 60 ) * 360 ) + 90 ;
86
+ minuteHand . style . transform = `rotate(${ minutesDegrees } deg)` ;
87
+
88
+ const hours = now . getHours ( )
89
+ const hoursDegrees = ( ( hours / 12 ) * 360 ) + 90 ;
90
+ hourHand . style . transform = `rotate(${ hoursDegrees } deg)` ;
91
+ }
92
+ setInterval ( setDate , 1000 )
70
93
71
94
</ script >
72
95
</ body >
You can’t perform that action at this time.
0 commit comments