-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathClock1.html
More file actions
121 lines (114 loc) · 3.55 KB
/
Clock1.html
File metadata and controls
121 lines (114 loc) · 3.55 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Analog Clock</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" /> -->
<style>
.center {
transform: translate(-50%, -50%);
}
.number {
--rotation: 0;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(var(--rotation));
}
.clock .number1 {
--rotation: 30deg;
}
.clock .number2 {
--rotation: 60deg;
}
.clock .number3 {
--rotation: 90deg;
}
.clock .number4 {
--rotation: 120deg;
}
.clock .number5 {
--rotation: 150deg;
}
.clock .number6 {
--rotation: 180deg;
}
.clock .number7 {
--rotation: 210deg;
}
.clock .number8 {
--rotation: 240deg;
}
.clock .number9 {
--rotation: 270deg;
}
.clock .number10 {
--rotation: 300deg;
}
.clock .number11 {
--rotation: 330deg;
}
.clock .number12 {
--rotation: 0deg;
}
.hand {
--rotation: 0;
position: absolute;
bottom: 50%;
left: 50%;
border: 1px solid white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transform-origin: bottom;
z-index: 10;
transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}
</style>
</head>
<body>
<h1 class="text-2xl md:text-3xl lg:text-4xl text-center font-medium text-black py-8 mb-20 bg-blue-200">
Analog clock in <span class="text-indigo-600">JavaScript Course</span>
<a href="https://github.com/deepk2891/Javascript/tree/main/projects/Clock1.html" target="_blank" class="absolute right-6 top-0 text-sm">view code</a>
</h1>
<div class="clock relative border-b-8 rounded-full border-indigo-600 h-64 md:h-80 lg:h-96 w-64 md:w-80 lg:w-96 m-auto text-xl md:text-2xl lg:text-3xl font-semibold">
<div class="center absolute rounded-full top-1/2 left-1/2 h-2 w-2 bg-black z-50"></div>
<div class="hand hour bg-black rounded-full h-1/4 w-2 data-hour-hand"></div>
<div class="hand minute bg-indigo-600 rounded-full h-2/5 w-1 data-minute-hand"></div>
<div class="hand second bg-gray-400 rounded-full h-1/3 w-1 data-second-hand"></div>
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
</div>
<script>
setInterval(setClock, 1000)
const hourHand = document.querySelector(".data-hour-hand")
const minuteHand = document.querySelector(".data-minute-hand")
const secondHand = document.querySelector(".data-second-hand")
function setClock() {
const currentDate = new Date()
const secondsRatio = currentDate.getSeconds() / 60
const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
setRotation(secondHand, secondsRatio)
setRotation(minuteHand, minutesRatio)
setRotation(hourHand, hoursRatio)
}
function setRotation(element, rotationRatio) {
element.style.setProperty("--rotation", rotationRatio * 360)
}
setClock()
</script>
</body>
</html>