主要介绍了JS+CSS3实现的简易钟表效果,涉及JavaScript结合定时器的页面元素动态设置与数值计算相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS+CSS3实现的简易钟表效果。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>js+css3简易钟表 编程之家 www.jb51.cc</title>
<style type=text/css>
*{
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;
}
</style>
</head>
<body>
<div id=wrap>
<div id=hour></div>
<div id=min></div>
<div id=sec></div>
<div id=point></div>
<ul id=circle></ul>
</div>
</body>
<script type=text/javascript>
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)
</script>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。