css3 钟表

浏览数：36 / 时间：2015年06月09日

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style id= "css">
#wrap{
	width:200px;height: 200px;position: relative;border-radius: 50%;
	border:1px solid black;margin: 100px auto;
}
#wrap ul{
	margin:0px;padding: 0px;height: 200px;list-style: none;position: relative;
}
#wrap ul li {
	width: 2px; height: 6px; background: black;position: absolute;left: 98px;top: 0px; -webkit-transform-origin:center 100px;
}
#wrap ul li:nth-of-type(5n+1){height:10px;background:#000;}
#hour{
	width: 6px;height: 45px;background: #000;position: absolute; left: 97px;top: 55px;-webkit-transform-origin:bottom;
}
#min{
	width: 4px;height: 65px;background: #999;position: absolute; left: 98px;top: 35px;-webkit-transform-origin:bottom;
}
#sec{
	width: 2px;height: 80px;background: red;position: absolute; left: 99px;top: 20px;-webkit-transform-origin:bottom;
}
#icon{
	width:10px;height: 10px;background: #000;position:absolute;border-radius: 50%;left: 95px;top:95px;
}
</style>
<script>
	window.onload = function (){
		var oList = document.getElementById("list");
		var aLi = "";
		var oHour = document.getElementById("hour");
		var oMin = document.getElementById("min");
		var oSec = document.getElementById("sec");
		for(var i = 0; i < 60; i++)
		{
			
			aLi +="<li style=‘-webkit-transform:rotate("+6*i+"deg)‘></li>";

		}
		oList.innerHTML = aLi;
		setInterval( function(){
			toTime(oHour,oMin,oSec);
		},1000);
	

		function toTime(oHour,oMin,oSec)
		{
			var oDate=new Date();
			var iSec=oDate.getSeconds();
			var iMin=oDate.getMinutes()+iSec/60;
			var iHour=(oDate.getHours()%12)+iMin/60;
			oSec.style.WebkitTransform="rotate("+(iSec*360/60)+"deg)";
			oMin.style.WebkitTransform="rotate("+(iMin*360/60)+"deg)";
			oHour.style.WebkitTransform="rotate("+(iHour*360/12)+"deg)";
		}

	}
</script>
</head>
	<body>
		<div id = "wrap">
			<ul id = "list">
			</ul
		</div>
		<div id="hour"></div>
		<div id="min"></div>
		<div id="sec"></div>
		<div id="icon"></div>
	</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css3 钟表