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

2024-05-06 16:49:55

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>www.vevb.com 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>

运行效果：

JS,CSS3,钟表