你是否在为没什么东西可以装饰你的页面？那就来一款时尚的未花表盘吧。
众所周知，时钟分为秒针、分针、时针以及表盘四个图层，这样每根表针才能独立旋转运动。
如上图所示，我们有着红色（秒针）绿色（分针）蓝色（时针）三个正方形图层，当我们把它们按次序叠加到黑色（表盘）图层上去后，一个时钟就完成了。我们只要控制每个图层的旋转角度，被固定在那个图层上的表针就能指示当前时间，如最外层的灰色图层就是红色（秒针）图层旋转60度的结果。由于1分钟是60秒，1圈是360度，那么60度角就相当于是1/6分钟，也就是10秒。
既然我们已经掌握了原理了，马上来实践写一下吧。
一个正确的html文档结构应该是这样的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style></style><!-- 注意，待会我们要在这里面写【样式表】哦？ -->
</head>
<body>
<!-- 我们的时钟盘表是要放在这里的哦。 -->
</body>
</html>
那么，首先我们需要新建四个图层。
<div style="position:relative;<!-- 这是表盘图层 -->
background-image:url();<!-- 请在url的括号内用半角引号包裹填入正确的图片路径（可以是本地文件路径，最好是先把需要用的图片复制到【我的电脑-D盘】中去），如："D://3.jpg" -->
background-size:100px 100px;<!-- 声明一下底图的大小 -->
height:100px;width:100px;<!-- 声明一下表盘的大小 -->
border-radius:50%;<!-- 我们希望表盘是一个圆形的 -->
border:3px solid #333;<!-- 表盘要有一个#333【黑色的】边框 -->
">
<div class="hour"><!-- 这是蓝色（时针）图层，复制下面的tik图层到这里 --></div>
<div class="min"><!-- 这是绿色（分针）图层，复制下面的tik图层到这里 --></div>
<div class="sec"><!-- 这是红色（秒针）图层，复制下面的tik图层到这里 --></div>
<script>
//我们需要在这里执行一段JavaScript
</srcipt>
</div>
然后我们需要设计一下样式，要把样式写到<head>里去哦？下面就是一个【样式表】的例子，它包括样式以及一组动画帧，通过让tik图层在指定时间内旋转360度来完成指针旋转的动画。需要注意的是，我们使用transform-origin:bottom center;这个参数来改变了tik图层的旋转中心点，也就是坐标轴转换。
<style> .hour,.min,.sec{ position:absolute; top:0px;left:0px; height:100px;width:100px; } .tik{ position:absolute; background:#333; transform-origin:bottom center; animation-name:tik; animation-iteration-count: infinite; } @keyframes tik { from {transform: rotate(0deg); } to { transform: rotate(360deg); } } </style>
如原理图，hour、min、sec作为三个div图层，我们让其保持和表盘大小一致，也就是100px的长宽，然后通过绝对定位position:absolute;定位到其父级容器的top:0px;left:0px;这个点。这样在进行坐标转换的时候会方便很多。
然后我们在每一个表盘中加入一个名为tik类的指针图层。（记得修改参数）
<div class="tik" style=" <!--我们可以通过background:#36c;来设置指针的颜色-->
<!--width是指针宽度，height是指针长度，只要使得height+top等于容器一半的高度（100px/2=50px）即可。-->
top:20px;left:50px;
height:30px;width:2px;
<!--由于时针是86400s为一圈，分针是3600s为一圈，秒针是60s为一圈，所以hour类下面的tik图层的两个动画参数要设置为86400，而min是3600，sec是60，这是动画转一圈也就是360度所需要的时间和步骤数--> animation-duration:86400s; animation-timing-function: steps(86400);"></div> </div>
至此，所有的有关css方面的操作就算完成了，但是这样一来的话，每次打开的时候，这个时钟都是从0点0分0秒开始的，并不能准确反应现在的时间。但是不要紧，我们的样式已经完成了，只要使用JavaScript给表盘设置一个正确的角度，之后的事情交给css去执行就好了，反正时钟本质上就是通过指针旋转的角度来反应时间的，和真实时间没关系。
<srcipt>
var date = new Date();//首先new一个时间的对象 var hour = document.getElementsByClassName("hour")[0]//通过类名获得所有符合条件的dom对象，并且得到数组里的第一个值，将其命名为hour变量
var hdeg =360/12*(date.getHours());//我们获取当前的小时值，将其换算成时针应当旋转的角度，由于一圈360度是12小时，所以每小时就是360/12=30度，乘上当前时间就是应当旋转的角度，将其命名为hdeg变量
hour.style.transform = "rotate("+ hdeg +"deg) translateX(-1px)";//我们对hour的样式进行变换操作，让其旋转一个正确的角度，那我们使用hdeg这个已经计算好的值就可以了。
//不过需要注意的一点是我们在旋转完成后，还需要使用translateX(-1px)，让指针整体向X方向轴移动一个像素点，这是因为我们的指针的宽度是2，旋转的时候使用的指针的左下角，因此并不是指针的下方的中心，所以需要把指针整体横移一个像素点，这样才会移动到正中心
//剩下的事情就简单了，把min和sec指针也一并设置了即可，计算非常简单 document.getElementsByClassName("min")[0].style.transform = "rotate("+360/60*(date.getMinutes())+"deg) translateX(-1px)"; document.getElementsByClassName("sec")[0].style.transform = "rotate("+360/60*(date.getSeconds())+"deg) translateX(-1px)";
</script>
哦，对了，是想要设置表盘图片是吧？
那么试着在表盘的style中对background-image:url(【文件路径】)进行设置吧？
那么，最后的效果会是这样的。
