JS实现简易刻度时钟示例代码
程序员文章站
2022-07-10 09:42:26
如图所示，利用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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 小内存大流量VPS的有效利用方法总结