-
Notifications
You must be signed in to change notification settings - Fork 2
/
clock.html
70 lines (62 loc) · 2.91 KB
/
clock.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圆形钟表效果</title>
</head>
<body>
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="filter" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="1"></feGaussianBlur>
</filter>
</defs>
<circle cx="100" cy="100" r="88" fill="#999"></circle>
<circle filter="url(#filter)" cx="100" cy="100" r="85" fill="#000"></circle>
<circle cx="100" cy="100" r="5" fill="#fff"></circle>
<circle cx="137" cy="36" r="3" fill="#fff"></circle>
<circle cx="164" cy="63" r="3" fill="#fff"></circle>
<circle cx="175" cy="100" r="3" fill="#fff"></circle>
<circle cx="164" cy="137" r="3" fill="#fff"></circle>
<circle cx="137" cy="165" r="3" fill="#fff"></circle>
<circle cx="100" cy="175" r="3" fill="#fff"></circle>
<circle cx="63" cy="165" r="3" fill="#fff"></circle>
<circle cx="36" cy="137" r="3" fill="#fff"></circle>
<circle cx="25" cy="100" r="3" fill="#fff"></circle>
<circle cx="36" cy="63" r="3" fill="#fff"></circle>
<circle cx="63" cy="36" r="3" fill="#fff"></circle>
<circle cx="100" cy="26" r="3" fill="#fff"></circle>
<text font-size="16" x="90" y="46" fill="#fff">12</text>
<text font-size="16" x="31" y="105" fill="#fff">9</text>
<text font-size="16" x="94" y="170" fill="#fff">6</text>
<text font-size="16" x="160" y="105" fill="#fff">3</text>
<line id="seconds" x1="100" y1="110" x2="100" y2="28" stroke-width="2" stroke="#fff"></line>
<line id="minutes" x1="100" y1="110" x2="100" y2="50" stroke-width="3" stroke="#fff"></line>
<line id="hours" x1="100" y1="110" x2="100" y2="60" stroke-width="4" stroke="#fff"></line>
</svg>
<script>
function start(){
var currentDate = new Date()
var hours = currentDate.getHours()
hours = hours > 12 ? hours - 12 : hours
var minutes = currentDate.getMinutes()
var seconds = currentDate.getSeconds()
var hoursHand = document.getElementById('hours')
var minutesHand = document.getElementById('minutes')
var secondsHand = document.getElementById('seconds')
/**
* 1. rotate里面需要对时间与度数进行转换
* 2. 假设现在是下午14:30，根据上面的表达式计算hours=2，然后乘以30就是60度，时针正好指向2的方向
* 3. 又因为分针指向的是30，所以还应该给时针再添加一个偏移量，让时针指向2和3中间的位置
*/
hoursHand.setAttribute('transform', `rotate(${(hours + (minutes / 60)) * 30} 100 100)`)
minutesHand.setAttribute('transform', `rotate(${minutes * 6} 100 100)`)
secondsHand.setAttribute('transform', `rotate(${seconds * 6} 100 100)`)
}
start()
setInterval(start, 1000)
</script>
</body>
</html>