js實(shí)現(xiàn)手表表盤時(shí)鐘與圓周運(yùn)動(dòng)

更新時(shí)間：2020年09月18日 11:58:41 作者：瘋?cè)薌ort

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)手表表盤時(shí)鐘與圓周運(yùn)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

蘋果手表表盤時(shí)鐘與js圓周運(yùn)動(dòng)

實(shí)現(xiàn)結(jié)果

需求分析：

1、時(shí)鐘時(shí)間按照北京時(shí)間進(jìn)行顯示;
2、時(shí)針、分針、秒針按照時(shí)鐘運(yùn)轉(zhuǎn)標(biāo)準(zhǔn)進(jìn)行運(yùn)轉(zhuǎn)；
3、小球跟隨秒表圍繞表盤進(jìn)行圓周運(yùn)動(dòng)。

代碼分析

1、html結(jié)構(gòu)：時(shí)針、分針、秒針、小球分別用一個(gè)div，將他們一起放到一個(gè)大的div中；
2、css樣式：表盤布局多使用相對(duì)定位與絕對(duì)定位，將表針與各時(shí)刻標(biāo)刻移動(dòng)到特定的位置；
3、js行為：為了實(shí)現(xiàn)動(dòng)態(tài)獲取時(shí)間，可以使用var now=new Date()，再利用定時(shí)器setInterval，實(shí)現(xiàn)每經(jīng)過(guò)1s重新獲取當(dāng)前時(shí)間。

核心函數(shù)

時(shí)鐘運(yùn)動(dòng)

function getTimeDeg(){
   //獲取當(dāng)前時(shí)間，計(jì)算在時(shí)鐘上，時(shí)、分、秒對(duì)應(yīng)轉(zhuǎn)動(dòng)角度
 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)`;
 }

圓周運(yùn)動(dòng)

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

完整源代碼（復(fù)制可用）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>表盤時(shí)鐘</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節(jié)點(diǎn)
  var ball=document.getElementById("ball")
  var divS=document.getElementById("s");
 var divM=document.getElementById("m");
 var divH=document.getElementById("h");
  //調(diào)用函數(shù)，可刪除，刪除后需等待1s才能看到運(yùn)轉(zhuǎn)
 getTimeDeg();
  //設(shè)置間隔時(shí)間為1s的定時(shí)器，每1s運(yùn)行一次函數(shù)
  setInterval(getTimeDeg,1000);
  //時(shí)間獲取函數(shù)
  circleMotion();
  setInterval(circleMotion,1000);

  //時(shí)鐘運(yùn)動(dòng)
 function getTimeDeg(){
   //獲取當(dāng)前時(shí)間，計(jì)算在時(shí)鐘上，時(shí)、分、秒對(duì)應(yīng)轉(zhuǎn)動(dòng)角度
 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)`;
 }
  //圓周運(yùn)動(dòng)
  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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: