jsは腕時計の文字盤の時計と円周の運動を実現します。
アップル時計の文字盤時計とjs円周運動
実を結ぶ
需要分析：
1、時計の時間は北京時間によって表示されます。
2、時計の針、分針、秒針は時計の運行基準に従って運行します。
3、小さいボールはストップウォッチに従って文字盤をめぐって円周運動を行います。
コード解析
1、html構造：時計回り、分針、秒針、小球はそれぞれ一つのdivを使って、彼らを一緒に大きなdivに入れます。
2、cssスタイル：文字盤のレイアウトは相対的な位置決めと絶対的な位置決めを使用して、時計の針と各時刻の刻み込みを特定の位置に移動します。
3、js行為：ダイナミックな取得時間を実現するために、var now=new Date()を使用して、タイマーset Intervalを再利用して、1 sごとに現在時間を再取得することができます。
コア関数
時計の動き
実を結ぶ
需要分析：
1、時計の時間は北京時間によって表示されます。
2、時計の針、分針、秒針は時計の運行基準に従って運行します。
3、小さいボールはストップウォッチに従って文字盤をめぐって円周運動を行います。
コード解析
1、html構造：時計回り、分針、秒針、小球はそれぞれ一つのdivを使って、彼らを一緒に大きなdivに入れます。
2、cssスタイル：文字盤のレイアウトは相対的な位置決めと絶対的な位置決めを使用して、時計の針と各時刻の刻み込みを特定の位置に移動します。
3、js行為：ダイナミックな取得時間を実現するために、var now=new Date()を使用して、タイマーset Intervalを再利用して、1 sごとに現在時間を再取得することができます。
コア関数
時計の動き
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>