这篇文章主要为大家详细介绍了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'; }
完整源代码（复制可用）
表盘时钟 #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; }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是js实现手表表盘时钟与圆周运动的详细内容，更多请关注本站其它相关文章！
