CoolTab/clock.html at main · Mewinator/CoolTab · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body { overflow: hidden; margin: 0; }
        svg{ position: absolute; top: 0; left: 0; }
        text {
            fill: white;
            font-family: Arial, sans-serif;
            font-size: 32px;
            text-anchor: middle;
            dominant-baseline: middle;
        }
    </style>
</head>
<body>
    <svg id="clock" width="66" height="66" viewBox="0 0 300 300">
        <circle cx="150" cy="150" r="140" fill="#222" stroke="#aaa" stroke-width="4"/>
        <g id="ticks"></g>
        <g id="numbers"></g>
        <line id="hourHand" x1="150" y1="150" x2="150" y2="95" stroke="#fff" stroke-width="12" stroke-linecap="round"/>
        <line id="minuteHand" x1="150" y1="150" x2="150" y2="70" stroke="#9f9f9f" stroke-width="8" stroke-linecap="round"/>
        <line id="secondHand" x1="150" y1="150" x2="150" y2="50" stroke="red" stroke-width="4" stroke-linecap="round"/>
        <circle cx="150" cy="150" r="5" fill="red"/>
    </svg>
    <script>
        const center = 150;
        const radius = 130;
        const ticks = document.getElementById("ticks");
        const numbers = document.getElementById("numbers");
        for (let i = 0; i < 60; i++) {
            const a = i * 6 * Math.PI / 180;
            const isHour = i % 5 === 0;
            const len = isHour ? 15 : 7;
            const x1 = center + Math.sin(a) * (radius - len);
            const y1 = center - Math.cos(a) * (radius - len);
            const x2 = center + Math.sin(a) * radius;
            const y2 = center - Math.cos(a) * radius;
            const line = document.createElementNS("http://www.w3.org/2000/svg","line");
            line.setAttribute("x1",x1);
            line.setAttribute("y1",y1);
            line.setAttribute("x2",x2);
            line.setAttribute("y2",y2);
            line.setAttribute("stroke","white");
            line.setAttribute("stroke-width",isHour?3:1);
            ticks.appendChild(line);
        }
        for (let i = 1; i <= 12; i++) {
            const a = i * 30 * Math.PI / 180;
            const x = center + Math.sin(a) * 105;
            const y = center - Math.cos(a) * 105;
            const t = document.createElementNS("http://www.w3.org/2000/svg","text");
            t.setAttribute("x",x);
            t.setAttribute("y",y);
            t.textContent = i;
            numbers.appendChild(t);
        }
        const hourHand = document.getElementById("hourHand");
        const minuteHand = document.getElementById("minuteHand");
        const secondHand = document.getElementById("secondHand");
        function updateClock() {
            const now = new Date();
            const s = now.getSeconds();
            const m = now.getMinutes();
            const h = now.getHours() % 12;
            secondHand.setAttribute("transform",`rotate(${s*6} 150 150)`);
            minuteHand.setAttribute("transform",`rotate(${m*6 + s*0.1} 150 150)`);
            hourHand.setAttribute("transform",`rotate(${h*30 + m*0.5} 150 150)`);
        }
        function startClock() {
            updateClock();
            const now = Date.now();
            const delay = 1000 - (now % 1000);
            setTimeout(() => {
                updateClock();
                setInterval(updateClock, 1000);
            }, delay);
        }
        startClock();
    </script>
</body>
</html>