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