快捷導(dǎo)航

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

更新時間：2019年04月13日 08:57:36 作者：吞石魚

這篇文章主要介紹了JS+CSS3實(shí)現(xiàn)的簡易鐘表效果,涉及JavaScript結(jié)合定時器的頁面元素動態(tài)設(shè)置與數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>m.fzitv.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');
    //創(chuàng)建表盤，ul寬高為wrap寬高，以wrap中心點(diǎn)為變換基點(diǎn)，動態(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ù)，確保每一秒更新一次最新時間。并且計(jì)算時間準(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)前時間*每個單位時間走的角度=指針指向
    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)行效果：