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';
    }

完整源代码（复制可用）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。