仿真的时钟转动
Posted 清风白水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿真的时钟转动相关的知识，希望对你有一定的参考价值。
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>
以上是关于仿真的时钟转动的主要内容，如果未能解决你的问题，请参考以下文章
资料转发分享基于8086 8253定时计数器方波发生器仿真基于8086 1602动态显示仿真设计基于8086步进电机转动控制设计
Proteus仿真Arduino UNO利用Stepper库实现uln2003驱动步进电机转动