原生JS实现的简单小钟表功能示例-创新互联

本文实例讲述了原生JS实现的简单小钟表功能。分享给大家供大家参考，具体如下：

我们提供的服务有：成都网站设计、网站制作、微信公众号开发、网站优化、网站认证、启东ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的启东网站制作公司

先来看看运行效果：

原生JS实现的简单小钟表功能示例

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>www.jb51.net 钟表</title>
    <style type="text/css">
      body {
       background-color:#00A2D4;
      }
      .clock {
        width: 200px;
        height: 200px;
        background: -webkit-radial-gradient(#3b3b3b, #000);
        background: radial-gradient(#2E3F50, #0E1B29);
        box-shadow: inset 0px 0px 30px #131313, 0px 2px 18px rgba(0,0,0,0.5);
        border: 6px solid #172839;
        border-radius: 106px;
        margin: auto;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
      }
      .hour-hand {
        width: 4px;
        height: 55px;
        background: #fff;
        box-shadow: 0px 0px 7px #000;
        position: absolute;
        top: 45px;
        left: 98px;
      }
      .minute-hand {
        width: 4px;
        height: 80px;
        background: #fff;
        box-shadow: 0px 0px 4px #000;
        position: absolute;
        top: 20px;
        left: 98px;
      }
      .second-hand {
        width: 2px;
        height: 80px;
        background: #bbb;
        box-shadow: 0px 0px 7px #000;
        position: absolute;
        top: 20px;
        left: 99px;
      }
      .pin {
        width: 10px;
        height: 10px;
        background: #222;
        border-radius: 10px;
        margin: auto;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
      }
      .hour-hand,
      .minute-hand,
      .second-hand {
        -webkit-transform-origin: 50% 100%;
        -moz-transform-origin: 50% 100%;
        -o-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
      }
      .circle{
        width:20px;
        height:20px;
        line-height:20px;
        text-align:center;
        color:#fff;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <div class="minute-hand"></div>
      <div class="hour-hand"></div>
      <div class="second-hand"></div>
      <div class="pin"></div>
      <div class="circle">6</div>
      <div class="circle">5</div>
      <div class="circle">4</div>
      <div class="circle">3</div>
      <div class="circle">2</div>
      <div class="circle">1</div>
      <div class="circle">12</div>
      <div class="circle">11</div>
      <div class="circle">10</div>
      <div class="circle">9</div>
      <div class="circle">8</div>
      <div class="circle">7</div>
    </div>
    <div class="time"></div>
    <script type="text/javascript">
      window.onload=function(){
        setInterval(function(){
          var dt = new Date();
          var sec_deg = dt.getSeconds() * (360/60);
          var min_deg = dt.getMinutes() * (360/60);
          var hr_deg = dt.getHours() * (360/12) + dt.getMinutes() * (360/60/12);
          document.querySelector(".clock .second-hand").style.cssText='-webkit-transform:rotate(' + sec_deg + 'deg)','-moz-transform:rotate(' + sec_deg + 'deg)', '-o-transform:rotate(' + sec_deg + 'deg)', '-ms-transform:rotate(' + sec_deg + 'deg)', 'transform:rotate(' + sec_deg + 'deg)';
          document.querySelector('.clock .minute-hand').style.cssText='-webkit-transform:rotate(' + min_deg + 'deg)', '-moz-transform:rotate(' + min_deg + 'deg)', '-o-transform:rotate(' + min_deg + 'deg)', '-ms-transform:rotate(' + min_deg + 'deg)', 'transform:rotate(' + min_deg + 'deg)';
          document.querySelector('.clock .hour-hand').style.cssText='-webkit-transform:rotate(' + hr_deg + 'deg)', '-moz-transform:rotate(' + hr_deg + 'deg)', '-o-transform:rotate(' + hr_deg + 'deg)', '-ms-transform:rotate(' + hr_deg + 'deg)', 'transform:rotate(' + hr_deg + 'deg)';
         }, 1000);
        var dx=90,
          dy=90,
          s=87,//半径
          x=Math.sin(0),
          y=Math.cos(0),
          dig=2*Math.PI/12;
        var circle=document.querySelectorAll(".circle");
        for(var i=0;i<12;i++){
          var x=Math.sin(i*dig);
          var y=Math.cos(i*dig);
          var topValue=Number(dy+y*s),
            leftValue=Number(dx+x*s);
          circle[i].style.top=topValue+"px";
          circle[i].style.left=leftValue+"px";
        }
      }
    </script>
  </body>
</html>

网站名称：原生JS实现的简单小钟表功能示例-创新互联
转载注明：https://www.cdcxhl.com/article6/disoig.html

成都网站建设公司_创新互联，为您提供做网站、网站排名、自适应网站、移动网站建设、微信公众号、搜索引擎优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容