利用css+javascript可以做一个简单的时钟

html布局

<div id="warp">
	<ul>
	</ul>
	<div class="hour"></div>
	<div class="min"></div>
	<div class="sec"></div>
	<div class="icon"></div>
</div>

设置时，分，秒钟样式

#warp > .hour{
	position: absolute;
	left: 97px;
	top:70px;
	height: 30px;
	width: 6px;
	background: black;
	transform-origin: center bottom;
}
#warp > .min{
	position: absolute;
	left: 98px;
	top: 50px;
	height: 50px;
	width: 4px;
	background: gray;
	transform-origin: center bottom;
}
#warp > .sec{
	position: absolute;
	left: 99px;
	top: 30px;
	height: 70px;
	width: 2px;
	background: red;
	transform-origin: center bottom;
}
#warp > .icon{
	position: absolute;
	left: 90px;
	top: 90px;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: pink;
}

获取本地时间，设置动画效果

var hourNode=document.querySelector("#warp > .hour")
var minNode=document.querySelector("#warp > .min")
var secNode=document.querySelector("#warp > .sec")
var ulNode=document.querySelector("#warp > ul")
var styleNode=document.querySelector("#css")   

var liHtml="",cssText=""
for (var i = 0; i < 60; i++) {
	liHtml+="<li></li>"
	cssText+="ul > li:nth-child("+(i+1)+"){transform: rotate("+(i*6)+"deg);}"
}
ulNode.innerHTML=liHtml;
styleNode.innerHTML+=cssText;

设置动态效果:

function move(){
	var date=new Date()
	var s=date.getSeconds()
	var m=date.getMinutes()+s/60;
	var h=date.getHours()+m/60;
	
	hourNode.style.transform="rotate("+(30*h)+"deg)"
	minNode.style.transform="rotate("+(6*m)+"deg)"
	secNode.style.transform="rotate("+(6*s)+"deg)"
}

最终效果如下：