<!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>
