第35天:时钟效果

简介: 时钟效果案例1、得到现在的时分秒2、旋转角度原理一圈360°   60s   1s/6°旋转second.style.WebkitTransform="rotate(60deg)";//每秒旋转60度案例: 1 DOCTYPE html> 2 3 4 5 时钟效果 6 7 .

时钟效果案例

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>

运行效果:

 

相关文章
|
1月前
|
监控
单片机的时钟系统
单片机的时钟系统
16 1
定时器+按键控制LED流水灯模式+定时器时钟——“51单片机”
定时器+按键控制LED流水灯模式+定时器时钟——“51单片机”
|
23天前
STM32CubeMX配置时钟无法使用高速外部时钟HSE
STM32CubeMX配置时钟无法使用高速外部时钟HSE
|
3月前
|
前端开发 算法 JavaScript
html+css+js实现时钟
html+css+js实现时钟
27 0
|
11月前
|
测试技术 C语言 芯片
基于51单片机的自动打铃打鸣作息报时系统AT89C51数码管三极管时钟电路
基于51单片机的自动打铃打鸣作息报时系统AT89C51数码管三极管时钟电路
189 0
|
11月前
|
算法 机器人 芯片
利用单片机PWM信号占空比进行舵机控制
基于单片机的舵机控制方法具有简单、精度高、成本低、体积小的特点,并可根据不同的舵机数量加以灵活应用。
175 0
|
11月前
8-STM32之时钟系统
8-STM32之时钟系统
|
11月前
|
计算机视觉
【STM32】滴答时钟24位递减计数器系统时钟【SystTick】
【STM32】滴答时钟24位递减计数器系统时钟【SystTick】
176 0
|
11月前
4-STM32嘀嗒时钟(SysTick)
4-STM32嘀嗒时钟(SysTick)
|
芯片
FPGA-使用RTC时钟芯片进行时钟读取(数码管显示)
FPGA-使用RTC时钟芯片进行时钟读取(数码管显示)
248 0
FPGA-使用RTC时钟芯片进行时钟读取(数码管显示)