-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathAnalog.txt
123 lines (108 loc) · 3.24 KB
/
Analog.txt
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
122
123
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>analog clock</title>
<style type="text/css">
*{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
color: #ffffff;
}
body{
display: flex;
justify-content: center;
align-items: center;
main-height:100vh;
background-color:#212121;
}
.container{
position:relative;
}
.clock{
width:300px;
height:300px;
border-radius:50%;
background-color:rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
}
.clock span{
position: absolute;
transform: rotate(calc(30deg*var(--1)));
inset:12px;
text-align:center;
}
.clock span b{
position: absolute;
transform: rotate(calc(-30deg*var(--1)));
display: inline-block;
font-size: 20px;
}
.clock::before{
content: '';
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color:#fff ;
}
.hand{
position: absolute;
display: flex;
justify-content: center;
align-items:flex-end;}
.hand i{
position: absolute;
background-color:var(--clr);
width: 4px ;
height: var(--h);
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="clock">
<div style="--clr:rgb(255,150,58);--h:65px"id="hour" class="hand"><i></i></div>
<div style="--clr:#00a6ff;--h:84px"id="min" class="hand"><i></i></div>
<div style="--clr:#ff0000;--h:94px"id="sec" class="hand"><i></i></div>
<span style="--1:1"><b>1</b></span>
<span style="--1:2"><b>2</b></span>
<span style="--1:3"><b>3</b></span>
<span style="--1:4"><b>4</b></span>
<span style="--1:5"><b>5</b></span>
<span style="--1:6"><b>6</b></span>
<span style="--1:7"><b>7</b></span>
<span style="--1:8"><b>8</b></span>
<span style="--1:9"><b>9</b></span>
<span style="--1:10"><b>10</b></span>
<span style="--1:11"><b>11</b></span>
<span style="--1:12"><b>12</b></span>
<script type="text/javascript">
let hr = document.getElementById('hour');
let min = document.getElementById('min');
let sec = document.getElementById('sec');
function displayTime() {
let date = new Date();
let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
let hRotation =30*hh + mm/2;
let mRotation=6*mm;
let sRotation=6*ss;
hr.style.transform =`rotate(${hRotation}deg)`;
min.style.transform=`rotate(${mRotation}deg)`;
sec.style.transform=`rotate(${sRotation}deg)`;
}
setInterval(displayTime,1000)
</script>
</div>
</div>
</body>
</html>