这期内容当中小编将会给大家带来有关使用JavaScript怎么实现一个刻度时钟,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
布局代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css" id="sty"> *{ margin: 0; padding: 0; list-style: none; } #wrap{ width: 200px; height: 200px; border: 1px solid #000; border-radius: 50%; margin: 20px auto; position: relative; } #wrap ul{ position: relative; } #wrap ul li{ width: 2px; height: 6px; background: #000; position: absolute; left: 99px; top: 0; -moz-transform-origin: center 100px; } #wrap ul li:nth-child(5n){ height: 10px; } #con{ width: 10px; height: 10px; background: #000; border-radius: 50%; position: absolute; left: 95px; top: 95px; } #hour{ width: 5px; height: 70px; background: red; border-radius: 50%; position: absolute; left: 98px; top: 35px; -moz-transform-origin: center 65px; } #min{ width: 3px; height: 85px; background: #000; border-radius: 50%; position: absolute; left: 98.5px; top: 20px; -moz-transform-origin: center 80px; } #sec{ width: 2px; height: 100px; background: gray; border-radius: 50%; position: absolute; left: 98.5px; top: 20px; -moz-transform-origin: center 80px; } </style> </head> <body> <div id="wrap"> <ul id="list"> </ul> <div id="hour"></div> <div id="min"></div> <div id="sec"></div> <div id="con"></div> </div> </body> </html>
布局代码里需要注意的是:每隔四个刻度就有一个刻度比较长,所以我们在设置样式的时候要特别注意加上:#wrap ul li:nth-child(5n){height: 10px;}。第5n个的长度变长。
JS代码中主要搞清楚三针之间的度数关系就好做了,代码如下:
<script type="text/javascript"> window.onload=function(){ var oWrap=document.getElementById('wrap'); var oList=document.getElementById('list'); var oSty=document.getElementById('sty'); var tump=''; for(var i=0;i<60;i++){ var aLi=document.createElement('li'); oList.appendChild(aLi); tump+='#wrap ul li:nth-child('+(i+1)+'){transform: rotate('+(i+1)*6+'deg);}'; oSty.innerHTML+=tump; } var oSec=document.getElementById('sec'); var oMin=document.getElementById('min'); var oHour=document.getElementById('hour'); function time(){ var date=new Date(); var s=date.getSeconds(); var m=date.getMinutes()+(s/60); var h=date.getHours()+(m/60); oSec.style.transform='rotate('+s*6+'deg)'; oMin.style.transform='rotate('+m*6+'deg)'; oHour.style.transform='rotate('+h*30+'deg)'; } time(); setInterval(time,1000); } </script>
上述就是小编为大家分享的使用JavaScript怎么实现一个刻度时钟了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。