利用CSS3的transform与Date( )对象制作简单的表盘
先看效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/01923f9e4900b1760f80765210ae8a77.png#pic_center)
代码及注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自制表盘</title>
<style>
/* 表盘容器样式 */
#div1{
width: 300px;
height: 300px;
border: 6px #000 solid;
border-radius: 50%;
position: relative;
margin: 50px auto;
background-color: #e65757;
}
/* 表盘里60个刻度的容器 */
ul{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
/* 表盘里60个刻度的样式 */
li{
width: 2px;
height: 8px;
background-color: #000;
position: absolute;
left: 149px;
top: 0;
transform-origin: center 150px;
}
/* 刻度为5的倍数时的样式 */
li:nth-child(5n+1){
height: 15px;
background-color: #f00;
}
/* 时针的样式 */
#h{
position: absolute;
width: 8px;
height: 60px;
background-color: #000;
left: 146px;
top: 90px;
/* 设置旋转中心点 */
transform-origin: center bottom;
}
/* 分针的样式 */
#m{
position: absolute;
width: 4px;
height: 90px;
background-color: rgb(245, 172, 3);
left: 148px;
top: 60px;
transform-origin: center bottom;
}
/* 秒针的样式 */
#s{
position: absolute;
width: 2px;
height: 135px;
background-color: rgb(0, 255, 234);
left: 149px;
top: 15px;
transform-origin: center bottom;
}
/* 中心圆点的样式 */
#point{
width: 16px;
height: 16px;
position: absolute;
background-color: rgb(0, 0, 0);
border: oldlace 2px solid;
border-radius: 50%;
left: 142px;
top: 142px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="div1">
<!-- 表盘刻度容器 -->
<ul>
</ul>
<!-- 时针 -->
<span id="h"></span>
<!-- 分针 -->
<span id="m"></span>
<!-- 秒针 -->
<span id="s"></span>
<!-- 中心圆环 -->
<span id="point"></span>
</div>
<script>
var oUl=document.getElementsByTagName("ul")[0];
var oH=document.getElementById("h");
var oM=document.getElementById("m");
var oS=document.getElementById("s");
var oStyle=document.getElementsByTagName("style")[0];
var s="";
for(var i=0;i<12;i++){
s+=`li:nth-child(${5*i+1})::after{
display: block;
content: "${i==0?12:i}";
position: absolute;
transform: translate(-50%,80%);
}`
}
oStyle.innerHTML+=s;
var str="";
// 创建表盘的60个刻度
for(var i=0;i<60;i++){
str+="<li></li>";
}
oUl.innerHTML=str;
var aLi=oUl.getElementsByTagName("li");
// 表盘一共有60个刻度,所以每个刻度之间的间隔为6度
for(var i=0;i<aLi.length;i++){
aLi[i].style.transform=`rotate(${i*6}deg)`;
}
// 封装时钟函数
function clock(){
// 获取Date对象
var oTime=new Date();
// 获得当前的小时数 0-24
var iH=oTime.getHours();
// 获得当前的分种数 0-59
var iM=oTime.getMinutes();
// 获得当前的秒数 0-59
var iS=oTime.getSeconds();
// 设置时针的旋转角度 每小时旋转60度
var iHDeg=iH*30+iM/2+iS/120;
// 设置分针的旋转角度 每分针旋转6度
var iMDeg=iM*6+iS/10;
// 设置秒针的旋转角度 每秒钟旋转6度
var iSDeg=iS*6;
oH.style.transform=`rotate(${iHDeg}deg)`;
oM.style.transform=`rotate(${iMDeg}deg)`;
oS.style.transform=`rotate(${iSDeg}deg)`;
}
// 先直接调用一次,防止刷新页面时候有一秒的延时
clock();
// 循环计时器调用
setInterval(clock,1000);
</script>
</body>
</html>