简易时钟

基于css3、html的简约时钟

<div class="time">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<nav class="hours"></nav>
	<nav class="minutes"></nav>
	<nav class="seconds"></nav>
</div>

1.表盘样式

表盘由一个div和12个span组成

2.时 分 秒

由三个div组成

js部分

var timer=setInterval(fun,1000);
function fun(){
	var time=new Date();
	var hours=time.getHours();
	var minutes=time.getMinutes();
	var seconds=time.getSeconds();
	var ms=time.getMilliseconds();
	document.querySelector(".hours").style.transform='rotateZ('+(hours*30+minutes/2+seconds/120)+'deg)';
	document.querySelector(".minutes").style.transform='rotateZ('+(minutes*6+seconds/10)+'deg)';
	document.querySelector(".seconds").style.transform='rotateZ('+seconds*6+'deg)';
}

效果图

这个时钟很简单的，css样式随便你写，如果有需要，请传送到我的：github