标签：
效果如图：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style id=‘css‘>
#wrap {
margin: 30px auto;
border:1px solid black;
height: 300px;
width:300px;
border-radius:50%;
position: relative;
}
#list {
list-style:none;
}
#list li {
height: 4px;width: 2px;background:black;position:absolute;
-webkit-transform-origin:center 150px;
top:0;left: 150px;
}
#list li:nth-of-type(5n+1){
height: 10px;
}
#hour {
height: 70px;width: 5px;background:black;
position:absolute;
left: 150px;
top:80px;
-webkit-transform-origin:right bottom;
}
#min {
height: 90px;width: 3px;background:black;
position:absolute;
left: 150px;
top:60px;
-webkit-transform-origin:right bottom;}
#sec {
height: 100px;width: 2px;background:red;
position:absolute;
left: 150px;
top:40px;
-webkit-transform-origin:right bottom;}
#dot {
height: 30px;width: 30px;background:black;
position:absolute;border-radius:50%;
left: 135px;
top:135px;
}
</style>
</head>
<body>
<div id=‘wrap‘>
<ul id="list"></ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="dot"></div>
</div>
<script>
var hour=document.getElementById(‘hour‘);
var min=document.getElementById(‘min‘);
var sec=document.getElementById(‘sec‘);
var oUl=document.getElementById(‘list‘);
var oCss=document.getElementById(‘css‘);
var aLi=‘‘;
var sCss=‘‘;
for( var i= 0; i < 60; i++ ) {
aLi+=‘<li></li>‘;
sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform:rotate("+i*6+"deg);}";
}
oUl.innerHTML=aLi;
oCss.innerHTML+=sCss;
function change(){
var time = new Date();
var s=time.getSeconds();
var m=time.getMinutes()+s/60;
var h=time.getHours()+m/60;
h=h>12?h-12:h;
hour.style.webkitTransform=‘rotate(‘+h*30+‘deg)‘;
min.style.webkitTransform=‘rotate(‘+m*6+‘deg)‘;
sec.style.webkitTransform=‘rotate(‘+s*6+‘deg)‘;
}
setInterval(change,1000);
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/xyf993/p/4972987.html
