首先先用CSS画一个时钟，包括时针，分针，秒针。
<div class="time" id="box">
<div class="mid"></div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
css样式
*{
padding: 0;
margin: 0;
}
.time{/*时钟的轮廓*/
position: relative;
margin: 100px auto;
width: 400px;
height: 400px;
border: 20px solid #000;
border-radius: 50%;
background: url(time.jpg);
background-size: 100% 100%;
}
.mid{/*中间的小圆*/
width: 25px;
height: 25px;
background:#3e3e3e;
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
border-radius: 50%;
margin: auto;
z-index: 1000;
}
#box1{/*秒针的样式*/
width: 3px;
height: 180px;
position: absolute;
left: 50%;
top: 20px;
border-radius: 50%;
background:red;
transform-origin: center bottom;
z-index: 100;
}
#box2{/*分针的样式*/
width: 5px;
height: 170px;
position: absolute;
left: 50%;
top: 30px;
background:#060606;
border-radius: 2px;
transform-origin: center bottom;
z-index: 50;
}
#box3{/*时针的样式*/
width: 5px;
height: 140px;
position: absolute;
border-radius: 5px;
left: 50%;
top: 60px;
background:#999999;
z-index: 80;
transform-origin: center bottom;
}
</style>
接下来用js动态获取当前电脑的本地时间
setInterval(function (){//利用setInterval循环指针动画效果
var date = new Date();//获取电脑的本地时间
var second = date.getSeconds();//获取当前的秒数
var minute = date.getMinutes();//获取当前的分数
var hours = date.getHours(); //获取当前的小时数
var s = (second/60)*360; //秒针每一秒旋转的度数
var m = ((second/60)+minute)/60*360;//分针每一秒旋转的度数
var h = (hours+((second/60)+minute)/60)/12*360;//时针每一秒旋转的度数
box1.style.transform = "rotate("+s+"deg)";
//获取对应指针样式并进行赋值，利用transfom的动画效果来完成指针的旋转
box2.style.transform = "rotate("+m+"deg)";
box3.style.transform = "rotate("+h+"deg)";
},1000);
</script>
