思路：首先要做一个静态的钟表，当然指针是活的（可以用c3移动）
我这个初始静态为12点整
然后需要设置指针旋转的起点（也就是围着哪个点转）
transform-origin属性来进行设置
完了之后就是js部分了
js想要实现功能第一步肯定是要获取要改变的节点
下一步因为要使咱们的钟表时间和本地时间同步
所以要获取本地时间
获取本地时间具体参数 意思下面有注释
好了不说废话了直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--样式图片自己挑自己喜欢的就好-->
<style>
.clock{
317px;
height: 317px;
margin: 10% auto;
background: url(../img/clock-01.jpg); /*//钟表图自己可以随便下一个*/
position: relative;
background-size: 100% 100%;
}
.clock div{
position: absolute;
border-radius: 10px;
}
.clock div:first-child{
10px;
height: 55px;
background: url(../img/first.png); /*//时针图片*/
left: 154PX; /*//定位距离是根据图定的位 图片可能有偏差 如果不合适的话自己稍加改动即可 下面同理 */
top: 107PX;
background-size: 100% 100%;
transform-origin:bottom center;
}
.clock div:nth-child(2){
5px;
height: 75px;
background: url(../img/second.png); /*//分针图片*/
left: 154px;
top: 82px;
background-size: 100% 100%;
transform-origin:bottom center;
}
.clock div:nth-child(3){
8px;
height: 100px;
background: url(../img/third.png); /*秒针图片*/
background-size: 100% 100%;
transform-origin:bottom center;
left: 154px;
top: 57px;
}
.clock div:last-child{
20px;
height: 20px;
border-radius: 40px;
background: #000;
position: absolute;
left: 146px;
top: 47%;
}
</style>
</head>
<body>
<div class="clock">
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
<div></div>
</div>
<script type="text/javascript">
/*这个是分装好的函数所以改id直接在这改就好*/
timer =setInterval("fun('hours','minutes','seconds')",1000); //传入参数 var timer = setInterval(函数名/匿名函数,时间(毫秒))
function fun(h,m,s){ // 设置参数，
var hours= document.getElementById(h); //获取参数
var minutes= document.getElementById(m);
var seconds= document.getElementById(s);
var d= new Date(); //获取本地时间
var Os=d.getSeconds(); //本地时间的时
var Om=d.getMinutes(); //本地时间的分
var Oh=d.getHours(); //本地时间的秒
seconds.style.transform='rotate('+Os*6+'deg)'; //秒针一秒转6度
minutes.style.transform="rotate("+(Om+Os/60)*6+"deg)"; //分针一分钟转6度，那她一秒钟转的度数就是（分+秒）/60*6
hours.style.transform="rotate("+(Oh+Om/60)*30+"deg)"; ///分针一小时转30度，那她一秒钟转的度数就是（分+时）/60*30
}
</script>
</body>
</html>
个人理解不喜勿喷不懂的可以留言
