前几天没事写的个模拟时钟，代码仅供小白参考，大神请自动绕过。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>模拟时钟</title>
6 <style>
7 body {
8 margin: 0;
9 padding: 0;
10 }
11
12 #blockDial {
13 width: 200px;
14 height: 200px;
15 border: 2px solid black;
16 border-radius: 50%;
17 position: relative;
18 background-color: coral;
19 }
20
21 .heart {
22 width: 10px;
23 height: 10px;
24 background-color: black;
25 margin: 95px auto;
26 border-radius: 50%;
27 }
28
29 .blockwise {
30 width: 2px;
31 height: 80px;
32 background-color: black;
33 position: absolute;
34 left: 99px;
35 top: 20px;
36 z-index: 10;
37 }
38 .secondHand{
39 width: 2px;
40 height: 50px;
41 background-color: black;
42 position: absolute;
43 left: 99px;
44 top: 50px;
45 z-index: 10;
46 }
47 .minuteHand{
48 width: 2px;
49 height: 65px;
50 background-color: black;
51 position: absolute;
52 left: 99px;
53 top: 35px;
54 z-index: 10;
55 }
56 #currentTime{
57 width: 120px;
58 height: 30px;
59 border: 1px solid black;
60 margin: 10px 40px;
61 text-align: center;
62 line-height: 30px;
63 }
64 .num{
65 font-size: 24px;
66 color: aqua;
67 position: absolute;
68 }
69 .num3{
70 top:42%;
71 left: 90%;
72 }
73 .num6{
74 top:86%;
75 left: 46%;
76 }
77 .num9{
78 top:42%;
79 left: 0;
80 }
81 .num12{
82 top:0;
83 left: 44%;
84 }
85 </style>
86 </head>
87 <body>
88 <div id="blockDial">
89 <div class="heart"></div>
90 <div class="blockwise"></div>
91 <div class="secondHand"></div>
92 <div class="minuteHand"></div>
93 <div class="num num3">3</div>
94 <div class="num num6">6</div>
95 <div class="num num9">9</div>
96 <div class="num num12">12</div>
97 </div>
98 <div id="currentTime"></div>
99 <script src="main.js"></script>
100 </body>
101 </html>
html
1 (function () {
2
3 var blockwise = document.querySelector("#blockDial .blockwise");
4 var secondHand = document.querySelector("#blockDial .secondHand");
5 var minuteHand = document.querySelector("#blockDial .minuteHand");
6 var currentTime = document.querySelector("#currentTime");
7
8 function formate(num) {
9 return num>=10? num:"0"+num;
10 }
11
12 setInterval(function () {
13 var time = new Date();
14 currentTime.innerHTML = formate(time.getHours()) + ":" +
15 formate(time.getMinutes()) + ":" + formate(time.getSeconds());
16
17 var angleSeconds = time.getSeconds() * 6;
18 rotateDiv(secondHand, angleSeconds);
19
20 var angleHours = time.getHours() * 30;
21 rotateDiv(blockwise, angleHours);
22
23 var angleMinute = time.getMinutes() * 6;
24 rotateDiv(minuteHand, angleMinute);
25 }, 1000);
26
27 function rotateDiv(target, angle) {
28 target.style.transform = "rotate(" + angle + "deg) ";
29 target.style.transformOrigin = "100% 100%";
30 }
31
32 document.body.addEventListener("click", function (event) {
33 console.log(event.pageX, event.pageY);
34 });
35 })();
js
吐槽：这代码水准已经是我那时候的最高水平了，╮(╯▽╰)╭
时间： 2024-10-06 10:21:45