JS+CSS3实现的简易钟表效果示例

更新时间：2020-08-21 06:54:01 作者：startmvc

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

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


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>www.jb51.net js+css3简易钟表</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>

运行效果：