HTML 结构
<div id="wrap">
<ul id="list">
// 使用JavaScript动态生成时钟的刻度
<!-- 这里将使用JavaScript动态生成时钟的刻度 -->
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div class="ico"></div>
</div>
JavaScript 逻辑
// 获取页面中的元素
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 = "";
// 生成60个刻度,并设置每个刻度的旋转角度
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;
if (oCss) {
oCss.innerHTML += sCss;
}
// 每隔1秒更新时针、分针、秒针的位置
setInterval(toTime,1000);
// 初始化时钟的状态
toTime();
// 更新时钟的状态函数
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)";
};
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; /* 设置旋转的中心点 */
}
/* 每隔5个刻度,设置刻度的高度为12px */
#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;
}