js实现手表表盘时钟与圆周运动

苹果手表表盘时钟与js圆周运动

实现结果

js实现手表表盘时钟与圆周运动

需求分析:

1、时钟时间按照北京时间进行显示;
2、时针、分针、秒针按照时钟运转标准进行运转;
3、小球跟随秒表围绕表盘进行圆周运动。

代码分析

1、html结构:时针、分针、秒针、小球分别用一个div,将他们一起放到一个大的div中;
2、css样式:表盘布局多使用相对定位与绝对定位,将表针与各时刻标刻移动到特定的位置;
3、js行为:为了实现动态获取时间,可以使用var now=new Date(),再利用定时器setInterval,实现每经过1s重新获取当前时间。

核心函数

时钟运动

function getTimeDeg(){
      //获取当前时间,计算在时钟上,时、分、秒对应转动角度
  var now=new Date();
  var s=now.getSeconds();
  var sDeg=s/60*360;
      var m=now.getMinutes();
  var mDeg=(m*60+s)/3600*360;
      var h=now.getHours();
      var hDeg=(h*3600+m*60+s)/(3600*12)*360;
  divH.style.transform=`rotate(${hDeg}deg)`;
  divM.style.transform=`rotate(${mDeg}deg)`;
  divS.style.transform=`rotate(${sDeg}deg)`;
 }

圆周运动

function circleMotion(){
      var now=new Date();
      var sball=now.getSeconds();
  var saDeg=sball/60*360-90;
      var r = 250;
      var radian = saDeg*Math.PI/180;
      var top = Math.cos(radian)*r;
      var left = Math.sin(radian)*r;
      ball.style.left= top+'px';
      ball.style.top = left+'px';
    }

完整源代码(复制可用)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表盘时钟</title>
  <style>
    #circle{
      width: 500px;height: 500px;border-radius: 255px;
      position: relative;top: 50px;left: 500px;
      background: radial-gradient(black,grey);
      border:#f7f7f7 10px solid;
      box-shadow: 0px 0px 0px 2px #a3a4a6,0px 0px 0px 32px #dedfe1;
    }
    #ball{
      width: 30px;height: 30px;border-radius: 15px;
      background-color: red;position: absolute;
      margin-top: 235px;margin-left: 235px;
      z-index: 6;
    }
    #dian{
      width: 40px;height: 40px;border-radius: 20px;
      background-color:white;position: absolute;
      margin-top: 230px; margin-left: 230px;
      box-shadow:0px -15px 10px -7px #867c7c inset,0px 0px 2px 0px black ;
      z-index: 6;
    }
    #h{
  width:8px;height: 100px;background-color: white;
  position: absolute;border-radius: 8px;left: 246px;top: 150px;
      box-shadow:0px 0px 2px 1px #867c7c inset,0px 0px 1px 0px black ;
      z-index: 3;
      
 }
 #m{
  width:6px;height: 150px;background-color: white;
  position: absolute;top: 100px;left: 247px;border-radius: 6px;
      box-shadow:0px 0px 1px 0px #867c7c inset,0px 0px 1px 0px black ;
      z-index: 4;
      
 }
 #s{
  width:2px;height: 180px;background-color: red;
  position: absolute;top: 70px;left: 249px;border-radius: 2px;
      z-index: 5;
 }
 #s,#m,#h{
  transform-origin: center bottom;
 }
    .tip{
      width: 6px;height: 26px;border-radius: 3px;background-color: white;
      position: absolute;box-shadow:0px 0px 2px 1px #867c7c inset,0px 0px 1px 0px black ;
    }
    #time1{
      top: 34px;left: 372px;transform-origin:top center ;transform: rotate(30deg);
    }
    #time2{
      top: 125px;left: 463px;transform-origin:top center ;transform: rotate(60deg);
    }
    #time3{
      top: 230px;left: 475px;transform: rotate(90deg);
      width: 10px;height: 40px;border-radius: 5px;
    }
    #time4{
      top: 349px;left: 460px;transform-origin:bottom center ;transform: rotate(-60deg);
    }
    #time5{
      top: 440px;left: 369px;transform-origin:bottom center ;transform: rotate(-30deg);
    }
    #time6{
      top: 460px;left: 245px;width: 10px;height: 40px;border-radius: 5px;
    }
    #time7{
      top: 440px;left: 122px;transform-origin:bottom center ;transform: rotate(30deg);
    }
    #time8{
      top: 349px;left: 31px;transform-origin:bottom center ;transform: rotate(60deg);
    }
    #time9{
      top: 230px;left: 15px;transform: rotate(90deg);
      width: 10px;height: 40px;border-radius: 5px;
    }
    #time10{
      top: 124px;left: 30px;transform-origin:top center ;transform: rotate(-60deg);
    }
    #time11{
      top: 33px;left: 121px;transform-origin:top center ;transform: rotate(-30deg);
    }
    #time12{
      top: 0px;left: 245px;
      width: 10px;height: 40px;border-radius: 5px;
    }
  </style>
</head>
<body>
  <div id="circle">
    <div id="h"></div>
 <div id="m"></div>
    <div id="s"></div>
    <div id="ball" class="tip"></div>
    <div id="dian" class="tip"></div>
    <div id="time1" class="tip"></div>
    <div id="time2" class="tip"></div>
    <div id="time3" class="tip"></div>
    <div id="time4" class="tip"></div>
    <div id="time5" class="tip"></div>
    <div id="time6" class="tip"></div>
    <div id="time7" class="tip"></div>
    <div id="time8" class="tip"></div>
    <div id="time9" class="tip"></div>
    <div id="time10" class="tip"></div>
    <div id="time11" class="tip"></div>
    <div id="time12" class="tip"></div>
  </div>
  <script>
    //获取div节点
    var ball=document.getElementById("ball")
    var divS=document.getElementById("s");
 var divM=document.getElementById("m");
 var divH=document.getElementById("h");
    //调用函数,可删除,删除后需等待1s才能看到运转
 getTimeDeg();
    //设置间隔时间为1s的定时器,每1s运行一次函数
    setInterval(getTimeDeg,1000);
    //时间获取函数
    circleMotion();
    setInterval(circleMotion,1000);

    //时钟运动
 function getTimeDeg(){
      //获取当前时间,计算在时钟上,时、分、秒对应转动角度
  var now=new Date();
  var s=now.getSeconds();
  var sDeg=s/60*360;
      var m=now.getMinutes();
  var mDeg=(m*60+s)/3600*360;
      var h=now.getHours();
      var hDeg=(h*3600+m*60+s)/(3600*12)*360;
  divH.style.transform=`rotate(${hDeg}deg)`;
  divM.style.transform=`rotate(${mDeg}deg)`;
  divS.style.transform=`rotate(${sDeg}deg)`;
 }
    //圆周运动
    function circleMotion(){
      var now=new Date();
      var sball=now.getSeconds();
  var saDeg=sball/60*360-90;
      var r = 250;
      var radian = saDeg*Math.PI/180;
      var top = Math.cos(radian)*r;
      var left = Math.sin(radian)*r;
      ball.style.left= top+'px';
      ball.style.top = left+'px';
    }
  </script>
</body>
</html>

js实现手表表盘时钟与圆周运动

扫一扫手机访问