动态时钟

image-20240127135550361

  • 通过计算三个时间针的角度
  • 使用rotate()来调整他们的角度，水平角度为0deg
  • 然后开一个定时器动起来
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clock {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 10px solid darkgray;
            background-color: lightgray;
            margin: 0 auto;
            position: relative;
        }
        .mark {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: darkgray;
            position: absolute;
        }
        .twe {
            left: 145px;
            top: 10px;
        }
        .thr {
            right: 10px;
            top: 145px;
        }
        .six {
            bottom:10px;
            left: 145px;
        }
        .nine {
            left: 10px;
            top: 145px;
        }
        .center {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: darkgray;
            position: absolute;
            top: 140px;
            left: 140px;
        }
        .hand {
            position: absolute;
            left: 150px;
            border-radius: 0 50% 50% 0;
            transform-origin: 0;
        }
        .hour {
            width: 100px;
            height: 10px;
            background-color: red;
            top: 145px;
        }
        .min {
            width: 115px;
            height: 8px;
            background-color: blue;
            top: 146px;
        }
        .sec {
            width: 140px;
            height: 6px;
            background-color: rgb(22, 21, 21);
            top: 147px;
        }
        .weekday {
            width: 50px;
            height: 20px;
            position: absolute;
            right: 20px;
            top: 140px;
        }
        .weekday span {
            margin: 3px;
            background-color: antiquewhite;
        }
        .time{
            width: 66px;
            height: 20px;
            bottom: 25px;
            left: 117px;
            background-color: antiquewhite;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="mark twe"></div>
        <div class="mark thr"></div>
        <div class="mark six"></div>
        <div class="mark nine"></div>
        
        <div class="hand hour"></div>
        <div class="hand min"></div>
        <div class="hand sec"></div>
        <div class="weekday">
            <span>05</span><span>日</span>
        </div>
        <div class="time">23:59:59</div>
        <div class="center"></div>
    </div>
    <script>
        var hands = document.getElementsByClassName("hand");
        var weekday = document.getElementsByClassName("weekday")[0];
        var dayspan = weekday.getElementsByTagName("span")[0];
        var weekspan = weekday.getElementsByTagName("span")[1];
        var time = document.getElementsByClassName("time")[0];

        var clock = function() {
            var timeNow = new Date();
            var day = timeNow.getDate();
            var week = timeNow.getDay();
            var weeks = ['日','一','二','三','四','五','六']
            dayspan.innerHTML = format(day);
            weekspan.innerHTML = weeks[week];

            var h = timeNow.getHours();
            var m = timeNow.getMinutes();
            var s = timeNow.getSeconds();

            time.innerHTML = format(h) + ":" + format(m) + ":" + format(s);

            var sRot = s * 6 - 90;
            var mRot = m * 6 + (s/10) - 90;
            var hRot = h * 30 + (m / 2) - 90;
            // hands[2].style.transform = `rotate(${sRot}deg)`;
            hands[2].style.transform ="rotate(" + sRot + "deg)";
            hands[1].style.transform ="rotate(" + mRot + "deg)";
            hands[0].style.transform = "rotate(" + hRot + "deg)";

        }
        // clock();
        setInterval(clock,1000)
        function format(n) {
            return n>9?n:('0'+n);
        }
    </script>
</body>
</html>