JS实现简易刻度时钟示例代码
程序员文章站
2022-04-07 08:40:10
如图所示,利用js实现简易的刻度时钟;
原理如下:利用60等份的li进行布局,li两两之间的间隔为6deg,把基点定在圆心上,使得li圆形分布。然后另外设置三条...
如图所示,利用js实现简易的刻度时钟;
原理如下:利用60等份的li进行布局,li两两之间的间隔为6deg,把基点定在圆心上,使得li圆形分布。然后另外设置三条针线的样式的位置,基点同样定在圆心上,然后秒针每秒动6deg,分针每秒动1/60deg,时针每秒动1/3600deg。
布局代码如下:
<!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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
使用html2canvas.js实现页面截图并显示或上传的示例代码
-
js实现网页的两个input标签内的数值加减(示例代码)
-
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)_javascript技巧
-
js实现点小图看大图效果的思路及示例代码_javascript技巧
-
浅谈JS实现倒计时效果的两种方式(代码示例)
-
利用原生JS实现data方法示例代码
-
Spring Boot使用过滤器和拦截器分别实现REST接口简易安全认证示例代码详解
-
利用原生JS实现data方法示例代码
-
Spring Boot使用过滤器和拦截器分别实现REST接口简易安全认证示例代码详解
-
Java实现拖拽文件上传dropzone.js的简单使用示例代码