<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style id="css">
#wrap {
width: 200px;
height: 200px;
border: 2px solid #000;
margin: 100px auto;
border-radius: 50%;
position: relative;
}
#wrap ul {
margin: 0;
padding: 0;
height: 200px;
position: relative;
list-style: none;
}
#wrap ul li {
width: 2px;
height: 6px;
background: #000;
position: absolute;
left: 99px;
top: 0;
-webkit-transform-origin: center 100px;
}
/*#wrap ul li:nth-of-type(1){ -webkit-transform:rotate(0);}
#wrap ul li:nth-of-type(2){ -webkit-transform:rotate(6deg);}
#wrap ul li:nth-of-type(3){ -webkit-transform:rotate(12deg);}
#wrap ul li:nth-of-type(4){ -webkit-transform:rotate(18deg);}
#wrap ul li:nth-of-type(5){ -webkit-transform:rotate(24deg);}
#wrap ul li:nth-of-type(6){ -webkit-transform:rotate(30deg);}
#wrap ul li:nth-of-type(7){ -webkit-transform:rotate(36deg);}
#wrap ul li:nth-of-type(8){ -webkit-transform:rotate(42deg);}*/
#wrap ul li:nth-of-type(5n+1) {
height: 12px;
}
#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;
}
.ico {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
position: absolute;
left: 90px;
top: 90px;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<!--<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div class="ico"></div>
</div>
<script>
var oList = document.getElementById("list");
var oCss = document.getElementById("css");
var oHour = document.getElementById("hour");
var oMin = document.getElementById("min");
var oSec = document.getElementById("sec");
var aLi = "";
var sCss = "";
for(var i = 0; i < 60; i++) {
sCss += "#wrap ul li:nth-of-type(" + (i + 1) + "){ -webkit-transform:rotate(" + i * 6 + "deg);}";
aLi += "<li></li>"
}
oList.innerHTML = aLi;
oCss.innerHTML += sCss;
toTime();
setInterval(toTime, 1000);
function toTime() {
var oDate = new Date();
var iSec = oDate.getSeconds();
var iMin = oDate.getMinutes() + iSec / 60;
var iHour = oDate.getHours() + iMin / 60;
oSec.style.WebkitTransform = "rotate(" + iSec * 6 + "deg)";
oMin.style.WebkitTransform = "rotate(" + iMin * 6 + "deg)";
oHour.style.WebkitTransform = "rotate(" + iHour * 30 + "deg)";
};
</script>
</body>
</html>
运行效果图: