圆形钟表js实现

最新推荐文章于 2024-08-24 09:46:30 发布

柠檬布丁^O^

最新推荐文章于 2024-08-24 09:46:30 发布

阅读量2.7k

点赞数 1

本文链接：https://blog.csdn.net/qq_41805715/article/details/80493070

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 样式 */
*{
padding: 0;
margin: 0;
}
#clock{
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
margin-left: 20px;
margin-top:20px;
}
#a12{
position: absolute;
top:0;
left:90px;
}
#a6{
position: absolute;
top:180px;
left:90px;
}
#a3{
position: absolute;
top:90px;
left:180px;
}
#a9{
position: absolute;
top:90px;
left:0px;
}
#a1{
position: absolute;
top:10px;
left:145px;
}
#a2{
position: absolute;
top:45px;
left:175px;
}
#a5{
position: absolute;
top:165px;
left:145px;
}
#a4{
position: absolute;
top:135px;
left:170px;
}
#a11{
position: absolute;
top:10px;
left:45px;
}
#a10{
position: absolute;
top:45px;
left:15px;
}
#a8{
position: absolute;
top:135px;
left:15px;
}
#a7{
position: absolute;
top:170px;
left:45px;
}
#h{
width:7px;
height: 50px;
background-color: #37639C;
position: absolute;
border-radius: 6px;
left: 97px;
top: 50px;
}
#m{
width:5px;
height: 65px;
background-color: #37639C;
position: absolute;
top: 35px;
left: 98px;
border-radius: 4px;
}
#s{
width:3px;
height: 70px;
background-color: #37639C;
position: absolute;
top: 25px;
left: 99px;
border-radius: 2px;
}
#s,#m,#h{
transform-origin: center bottom;
}
</style>
</head>
<body>
<div id="clock">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
<div id="a1">I</div>
<div id="a2">II</div>
<div id="a3">III</div>
<div id="a4">IV</div>
<div id="a5">V</div>
<div id="a6">VI</div>
<div id="a7">VII</div>
<div id="a8">VIII</div>
<div id="a9">IX</div>
<div id="a10">X</div>
<div id="a11">XI</div>
<div id="a12">XII</div>
</div>
<script>
var divS=document.getElementById("s");
var divM=document.getElementById("m");
var divH=document.getElementById("h");
/*时、分、秒针转动度数计算*/
function task(){
var now=new Date();
var s=now.getSeconds();
var sDeg=s/60*360;
var m=now.getMinutes();
var mDeg=(m*60+s)/3600*360;
var h=now.getHours();
var hDeg=(h*3600+m*60+s)/(3600*12)*360;
divS.style.transform=`rotate(${sDeg}deg)`;
divM.style.transform=`rotate(${mDeg}deg)`;
divH.style.transform=`rotate(${hDeg}deg)`;
}
task();
/*事件间隔事件*/
setInterval(task,1000);
</script>
</body>
</html>