DDR爱好者之家 Design By 杰米
苹果手表表盘时钟与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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]