-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathClock.html
57 lines (49 loc) · 1.85 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
<html lang="de">
<head>
<meta charset="utf-8">
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
<style>
</style>
</head>
<body>
<script> "use strict";
const cx = 100, cy = 100; // Radius
const _clockstyle = "width: " + (2 * cx) + "px; height: " + (2 * cy) + "px;"
+ "border: 7px solid #282828; background: #585858;"
+ "border-radius: 50%; margin: 50px;"
+ "box-shadow: -4px -4px 10px rgba(67,67,67,0.5), inset 4px 4px 10px rgba(0,0,0,0.5),"
+ "inset -4px -4px 10px rgba(67,67,67,0.5), 4px 4px 10px rgba(0,0,0,0.3);"
sidiv("", _clockstyle)
let c = canvas2D({ width: px(2 * cx), height: px(2 * cy) })
c.ctx.lineCap = "round"
unselectBase()
// Paint anything radial
function tick(color, width, angle, length, innerlength = 0) {
function ls(length) { return length * Math.sin(angle / 180.0 * Math.PI) }
function lc(length) { return -length * Math.cos(angle / 180.0 * Math.PI) }
c.setLineType(width, color)
c.line(cx + ls(innerlength), cy + lc(innerlength), cx + ls(length), cy + lc(length))
}
// Draw clock
function drawClock() {
c.clear()
// Draw ticks
for (let i = 0; i < 360; i += 30)
if ((i % 90) == 0) tick("#1df52f", 5, i, 88, 70)
else tick("#bdbdcb", 3, i, 88, 75)
// draw hands
let t = new Date(); // get time
tick("#61afff", 5, t.getHours() * 30, 50) // hour
tick("#71afff", 2, t.getMinutes() * 6, 70) // min
tick("#ee791a", 2, t.getSeconds() * 6, 80) // s
// drwa center
c.setFillStyle("#4d4b63")
c.circle(cx, cy, 10, { fill: true })
}
drawClock()
setInterval(drawClock, 1000)
</script>
</body>
</html>