Commit c145ad3 0 parents commit c145ad3 Copy full SHA for c145ad3
File tree 3 files changed +134
-0
lines changed
3 files changed +134
-0
lines changed Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html lang ="en ">
3
+ < head >
4
+ < meta charset ="UTF-8 ">
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6
+ < title > Clock</ title >
7
+ < link rel ="stylesheet " href ="style.css ">
8
+ </ head >
9
+ < body >
10
+ < div class ="clock ">
11
+ < div class ="hand hour " id ="hour "> </ div >
12
+ < div class ="hand minute " id ="minute "> </ div >
13
+ < div class ="hand second " id ="second "> </ div >
14
+ < div class ="number number1 "> 1</ div >
15
+ < div class ="number number2 "> 2</ div >
16
+ < div class ="number number3 "> 3</ div >
17
+ < div class ="number number4 "> 4</ div >
18
+ < div class ="number number5 "> 5</ div >
19
+ < div class ="number number6 "> 6</ div >
20
+ < div class ="number number7 "> 7</ div >
21
+ < div class ="number number8 "> 8</ div >
22
+ < div class ="number number9 "> 9</ div >
23
+ < div class ="number number10 "> 10</ div >
24
+ < div class ="number number11 "> 11</ div >
25
+ < div class ="number number12 "> 12</ div >
26
+ </ div >
27
+ < script src ="script.js "> </ script >
28
+ </ body >
29
+ </ html >
30
+
Original file line number Diff line number Diff line change
1
+ // Set up an interval to update the clock every second
2
+ setInterval ( setClock , 1000 ) ;
3
+
4
+ // Get references to the clock hand elements
5
+ const hourHand = document . getElementById ( "hour" ) ;
6
+ const minuteHand = document . getElementById ( "minute" ) ;
7
+ const secondHand = document . getElementById ( "second" ) ;
8
+
9
+ // Function to update the clock hands
10
+ function setClock ( ) {
11
+ const currentDate = new Date ( ) ; // Get the current date and time
12
+
13
+ // Calculate the rotation ratios
14
+ const secondsRatio = currentDate . getSeconds ( ) / 60 ;
15
+ const minutesRatio = ( secondsRatio + currentDate . getMinutes ( ) ) / 60 ;
16
+ const hoursRatio = ( minutesRatio + currentDate . getHours ( ) % 12 ) / 12 ;
17
+
18
+ // Apply rotation to each hand
19
+ setRotation ( secondHand , secondsRatio ) ;
20
+ setRotation ( minuteHand , minutesRatio ) ;
21
+ setRotation ( hourHand , hoursRatio ) ;
22
+ }
23
+
24
+ // Function to apply rotation to an element
25
+ function setRotation ( element , rotationRatio ) {
26
+ if ( element ) {
27
+ // Rotate the element based on the calculated ratio
28
+ element . style . transform = `translateX(-50%) rotate(${ rotationRatio * 360 } deg)` ;
29
+ }
30
+ }
31
+
32
+ // Initialize the clock immediately
33
+ setClock ( ) ;
34
+
35
+
Original file line number Diff line number Diff line change
1
+
2
+ * {
3
+ margin : 0 ;
4
+ padding : 0 ;
5
+ box-sizing : border-box;
6
+ }
7
+
8
+ body {
9
+ background : red;
10
+ }
11
+
12
+ .clock {
13
+ margin-top : 20% ;
14
+ margin-left : 50% ;
15
+ transform : translate (-50% , -50% );
16
+ height : 300px ;
17
+ width : 300px ;
18
+ border-radius : 50% ;
19
+ background-color : aquamarine;
20
+ position : relative;
21
+ overflow : hidden;
22
+ }
23
+
24
+ .number {
25
+ position : absolute;
26
+ width : 100% ;
27
+ height : 100% ;
28
+ transform : rotate (0deg );
29
+ text-align : center;
30
+ }
31
+
32
+ .number1 { transform : rotate (30deg ); }
33
+ .number2 { transform : rotate (60deg ); }
34
+ .number3 { transform : rotate (90deg ); }
35
+ .number4 { transform : rotate (120deg ); }
36
+ .number5 { transform : rotate (150deg ); }
37
+ .number6 { transform : rotate (180deg ); }
38
+ .number7 { transform : rotate (210deg ); }
39
+ .number8 { transform : rotate (240deg ); }
40
+ .number9 { transform : rotate (270deg ); }
41
+ .number10 { transform : rotate (300deg ); }
42
+ .number11 { transform : rotate (330deg ); }
43
+
44
+ .hand {
45
+ position : absolute;
46
+ bottom : 50% ;
47
+ left : 50% ;
48
+ background-color : rgb (0 , 0 , 0 );
49
+ transform-origin : bottom;
50
+ border : 1px solid white;
51
+ width : 5px ;
52
+ height : 25% ;
53
+ z-index : 10 ;
54
+ transform : translateX (-50% ) rotate (var (--rotation )deg);
55
+ }
56
+
57
+ .second {
58
+ width : 7px ;
59
+ height : 43% ;
60
+ background-color : rgb (138 , 217 , 0 );
61
+ }
62
+
63
+ .minute {
64
+ width : 9px ;
65
+ height : 37% ;
66
+ background-color : blue;
67
+ }
68
+
69
+
You can’t perform that action at this time.
0 commit comments