JS+CSS3實(shí)現(xiàn)的簡(jiǎn)易鐘表效果示例

2024-05-06 16:49:55

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了JS+CSS3實(shí)現(xiàn)的簡(jiǎn)易鐘表效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>m.survivalescaperooms.com js+css3簡(jiǎn)易鐘表</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');    //創(chuàng)建表盤，ul寬高為wrap寬高，以wrap中心點(diǎn)為變換基點(diǎn)，動(dòng)態(tài)分配6°的li    for (var i=0;i<60;i++) {      var li=document.createElement('li');      cricle.appendChild(li);      li.style.transform='rotate('+i*6+'deg)';    }    //延時(shí)函數(shù)，確保每一秒更新一次最新時(shí)間。并且計(jì)算時(shí)間準(zhǔn)確值。    setInterval(function(){    var date=new Date();    var hour=date.getHours();    var min=date.getMinutes();    var sec=date.getSeconds();    min+=sec/60;    hour+=min/60;    //當(dāng)前時(shí)間*每個(gè)單位時(shí)間走的角度=指針指向    hourDom.style.transform='rotate('+hour*30+'deg)';    minDom.style.transform='rotate('+min*6+'deg)';    secDom.style.transform='rotate('+sec*6+'deg)';    },1000)  </script></html>

運(yùn)行效果：

JS,CSS3,鐘表