第35天：时钟效果
时钟效果案例
1、得到现在的时分秒 2、旋转角度原理 一圈360° 60s 1s/6° 旋转 second.style.WebkitTransform="rotate(60deg)";//每秒旋转60度
案例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>时钟效果</title>
6 <style>
7 .clock{
8 width: 600px;
9 height: 600px;
10 margin: 50px auto;
11 background: url(images/clock.jpg) no-repeat;
12 position: relative;
13 }
14 .clock div{
15 width: 100%;
16 height: 100%;
17 position: absolute;
18 top:0;
19 left: 0;
20 }
21 .clock .h{
22 background: url(images/hour.png) no-repeat center center;
23
24 }
25 .clock .m{
26 background: url(images/minute.png) no-repeat center center;
27 }
28 .clock .s{
29 background: url(images/second.png) no-repeat center center;
30 }
31 </style>
32 </head>
33 <body>
34 <div class="clock">
35 <div class="h" id="hour"></div>
36 <div class="m" id="minute"></div>
37 <div class="s" id="second"></div>
38 </div>
39 </body>
40 <script>
41 var h=document.getElementById("hour");
42 var m=document.getElementById("minute");
43 var s=document.getElementById("second");
44
45 var h= 0,m= 0,s= 0,ms=0;
46 setInterval(function(){
47 var date=new Date();//得到当前时间
48 ms=date.getMilliseconds();//当前的毫秒数
49 s=date.getSeconds()+ms/1000;//当前秒数+过去的秒数 1.3s
50 m=date.getMinutes()+s/60;//当前的分钟数+过去的分钟 2.8m
51 h=date.getHours()%12+m/60;//当前的小时+过去的 6.6h
52 //旋转 一圈360° 60秒 1秒6° webkit是谷歌前缀 moz是火狐
53 second.style.webkitTransform="rotate("+s*6+"deg)";
54 minute.style.webkitTransform="rotate("+m*6+"deg)";
55 hour.style.webkitTransform="rotate("+h*30+"deg)";
56 //火狐
57 second.style.MozTransform="rotate("+s*6+"deg)";
58 minute.style.MozTransform="rotate("+m*6+"deg)";
59 hour.style.MozTransform="rotate("+h*30+"deg)";
60 },1000)
61
62 </script>
63 </html>
运行效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-09-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读