时钟制作代码

最新推荐文章于 2025-01-19 15:10:05 发布

weixin_33726943

最新推荐文章于 2025-01-19 15:10:05 发布

阅读量701

点赞数

本文详细介绍如何使用HTML5、CSS3及JavaScript实现一个动态时钟。通过设置时钟样式和利用JavaScript定时更新指针位置，使时钟能实时显示当前时间。适合初学者实践并了解网页动态效果实现的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         .clock{
11             width: 600px;
12             height: 600px;
13             background: url('images/clock.jpg') no-repeat center center;
14             position: relative;
15             margin: 100px auto ;
16         }
17         .clock div{
18             width: 100%;
19             height: 100%;
20             position: absolute;
21             left: 0;
22             top: 0;
23         }
24         .h{
25             background: url("images/hour.png") no-repeat center center;
26         }
27         .m{
28             background: url("images/minute.png") no-repeat center center;
29 
30         }
31         .s{
32             background: url("images/second.png") no-repeat center center;
33         }
34     </style>
35 </head>
36 <body>
37         <div class="clock">
38             <div class="h" id="hour"></div>
39             <div class="m" id="minute"></div>
40             <div class="s" id="second"></div>
41         </div>
42 </body>
43 </html>
44 <script>
45     // 特别注意：calssname获得的是一个元素集合，需要的索引值
46     var hour = document.getElementsByClassName("h")[0];
47     var minute = document.getElementsByClassName("m")[0];
48     var second = document.getElementsByClassName("s")[0];
49     // 开始定时器
50     var s = 0,m = 0, h = 0, ms = 0;
51     setInterval(function() {
52         // 内容就可以了
53         var date = new Date();  // 得到最新的时间
54         ms = date.getMilliseconds(); // 现在的毫秒数
55         s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s
56         m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟
57         h = date.getHours() % 12 + m / 60 ;
58         //console.log(h);
59         //旋转角度
60         // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
61         second.style.transform = "rotate("+ s*6 +"deg)";
62         //  变化            旋转    deg  度
63         minute.style.transform = "rotate("+ m*6 +"deg)";
64         hour.style.transform = "rotate("+ h*30 +"deg)";
65 
66     },100);
67 </script>