css3 圆盘时钟,使用css3绘制一个圆形动态的时钟

钟表

#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度)

};