苹果手表表盘时钟与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圆周运动相关推荐

三星苹果手表_苹果和三星濒临新事物
三星苹果手表重点(Top highlight) Mobile processors in recent years have become, for a lack of a better word ...
Apple Watch苹果手表无线充电方案浅谈
Apple Watch自苹果公司于2014年9月10日公布第一款智能手表到现在已经发布到第7代了,功能越来越多,实用性和体验也更好.苹果手表没有传统的充电接口,采用的是无线充电,防水性更好. 今天谈一 ...
Apple Watch se功能介绍苹果手表se续航
苹果手表主要有以下功能: 1.Apple Watch拥有各种各样的个性化表盘,令你随心改变.自定义的设置.在自定义的表盘上,可以增加天气.下一个活动等实用信息.可以显示用户的心跳信息.Apple Wa ...
苹果最新的Apple Watch已推出，苹果手表系列6详情介绍
于2020年9月发布的Apple Watch Series 6是最初于2015年发布的Apple Watch的当前版本.AppleWatch Series 6 在设计上与Series 5相同,但在健康 ...
苹果手表计算机功能键,Apple Watch 使用技巧和隐藏功能大全应用之间快速切换教程...
Apple Watch 已经到达很多用户手中,Apple Watch采用蓝宝石屏幕与Force Touch触摸技术,不同于iPhone.iPad,苹果手表正面没有实体Home键,而是在侧面设置了一个D ...
苹果xr一直在白苹果_苹果watcyouve一直戴错了苹果手表
苹果xr一直在白苹果 By Jason Aten 杰森·阿滕(Jason Aten) I've been reviewing the Apple Watch Series 6 for the past ...
苹果手表对比_苹果会手表洗手提醒真正起作用吗
苹果手表对比微处理 (Microprocessing) I always thought I was pretty good at washing my hands, but when the pa ...
新款苹果手表来了！Apple Watch Series 7将于10月8日开售
近日,苹果官宣了Apple Watch Series 7将于10月8日晚8点接受预定,10月15日正式发售,起售价为2999元. 同时,Apple Watch Series 3起售价为1499元,Ap ...
男子网购二手苹果手表竟收到这些东西怒斥卖家：你这个骗子！
很多网友觉得在京东天猫这种购物平台上购物有点贵不划算,从而转战二手交易市场,想着能图个便宜,一般情况下也确实比其他购物平台要划算.然而今天要说这个李先生在二手交易平台咸鱼购物时翻车了,不仅亏了钱,买回 ...