仿真的时钟转动 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .c {
 8             position: relative;
 9             width: 600px;
10             height: 600px;
11             margin: 20px auto;
12             background: url("images/clock.jpg") no-repeat center center;
13         }
14         .c div {
15             position: absolute;
16             top: 0;
17             left: 0;
18             width: 100%;
19             height: 100%;
20 
21         }
22         .h {
23             background: url("images/hour.png") no-repeat center center;
24         }
25         .m {
26             background: url("images/minute.png") no-repeat center center;
27         }
28         .s {
29             background: url("images/second.png") no-repeat center center;
30         }
31     </style>
32     <script>
33         window.onload = function () {
34             function $(id){
35                 return document.getElementById(id);
36             }
37             function $arr(array){
38                 return document.getElementsByTagName(array);
39             }
40             var h = $("hour");
41             var m = $("minute");
42             var s = $("second");
43             hour = 0
44             minute =0
45             second = 0
46             var hour = 0,minute = 0,second = 0,ms=0;
47             setInterval(function(){
48                 var date = new Date();
49                 ms = date.getMilliseconds();
50                 second = date.getSeconds() + ms/1000;
51                 minute = date.getMinutes() + second/60;
52                 hour = date.getHours()%12 + minute/60;
53                 s.style.webkitTransform = "rotate("+second*6+"deg)";
54                 m.style.webkitTransform = "rotate("+minute*6+"deg)";
55                 h.style.webkitTransform = "rotate("+hour*30+"deg)";
56             },1000);
57 
58         }
59     </script>
60 </head>
61 <body>
62     <div class="c" id="clock">
63         <div class="h" id="hour"></div>
64         <div class="m" id="minute"></div>
65         <div class="s" id="second"></div>
66     </div>
67 </body>
68 </html>

 

posted @ 2017-07-02 20:44  清风白水  阅读(204)  评论(0)  编辑  收藏  举报