#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(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;
}
.icon {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
position: absolute;
left: 90px;
top: 90px;
}
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 oLi = "";
var sCss = "";
for (var i = 0; i < 60; i++) { //一个表盘总共是60个刻度
sCss += "#wrap ul li:nth-of-type(" + (i + 1) + "){-webkit-transform: rotate(" + i * 6 + "deg);}";
oLi += "
";};
oList.innerHTML = oLi;
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)";//秒针转动角度1秒6度 (表盘一圈360度一圈60秒所以一秒6度)
oMin.style.WebkitTransform = "rotate(" + iMin * 6 + "deg)";//分钟转动角度1分6度 (表盘一圈360度一圈60分所以一分6度)
oHour.style.WebkitTransform = "rotate(" + iHour * 30 + "deg)";//时针转动角度一小时30度(表盘一圈360度一圈12小时所以一小时30度)
};