css画钟表_JS+CSS3实现的简易钟表效果示例

本文实例讲述了JS+CSS3实现的简易钟表效果。分享给大家供大家参考，具体如下：

www.jb51.net js+css3简易钟表

*{

margin: 0;

padding: 0;

}

#wrap{

width: 300px;

height: 300px;

background-color: aliceblue;

margin: 200px auto;

position: relative;

box-sizing: border-box;

}

#wrap > div{

position: absolute;

top: 50%;

left: 50%;

}

#hour{

width: 6px;

height: 60px;

background-color: #000000;

margin: -60px -3px;

transform-origin: 3px 60px;

}

#min{

width: 4px;

height: 80px;

background-color: #000000;

margin: -80px -2px;

transform-origin: 2px 80px;

}

#sec{

width: 2px;

height: 100px;

background-color: red;

margin: -100px -1px;

transform-origin: 1px 100px;

}

#point{

width: 20px;

height: 20px;

background-color: burlywood;

margin: -10px -10px;

border-radius: 50%;

}

#circle{

width: 300px;

height: 300px;

position: relative;

}

#circle li{

list-style: none;

width: 2px;

height: 6px;

background-color: #000000;

position: absolute;

transform-origin: 1px 150px;

left: 149px;

top: 0px;

}

var hourDom=document.getElementById('hour');

var minDom=document.getElementById('min');

var secDom=document.getElementById('sec');

var cricle=document.getElementById('circle');

//创建表盘，ul宽高为wrap宽高，以wrap中心点为变换基点，动态分配6°的li

for (var i=0;i<60;i++) {

var li=document.createElement('li');

cricle.appendChild(li);

li.style.transform='rotate('+i*6+'deg)';

}

//延时函数，确保每一秒更新一次最新时间。并且计算时间准确值。

setInterval(function(){

var date=new Date();

var hour=date.getHours();

var min=date.getMinutes();

var sec=date.getSeconds();

min+=sec/60;

hour+=min/60;

//当前时间*每个单位时间走的角度=指针指向

hourDom.style.transform='rotate('+hour*30+'deg)';

minDom.style.transform='rotate('+min*6+'deg)';

secDom.style.transform='rotate('+sec*6+'deg)';

},1000)

运行效果：

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：

希望本文所述对大家JavaScript程序设计有所帮助。