js實現手錶錶盤時鐘與圓周運動
阿新 • • 發佈:2020-09-21
蘋果手錶錶盤時鐘與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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。