Knowledge points:
- Math.cos(x): The cos() method returns the cosine value of a number. What is returned is a number between -1.0 and 1.0.
- Math.sin(x): The sin() method returns the sine of a number. What is returned is a number between -1.0 and 1.0.
- The X in both functions refers to "radians" rather than "angles". The calculation formula of radian is: angle*(PI/180)
let h = deg * Math.PI / 180;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆周运动</title>
<style>
.big {
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px solid rgb(184, 135, 32);
margin: 100px auto;
position: relative;
}
.small {
width: 30px;
height: 30px;
border-radius: 50%;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
<script>
let big = document.querySelector('.big');
let small = document.querySelector('.small');
// 确定小圆的位置 left与top
// sin = 对边/斜边 cos = 邻边/斜边
let r = big.offsetWidth / 2; //半径
//给一个初始角度
//两个函数中的X 都是指的“弧度”而非“角度” 弧度的计算公式为: 角度*(PI/180)
let deg = 30;
setInterval(() => {
deg++;
let h = deg * Math.PI / 180;
let lef = r - r * Math.cos(h)-small.offsetWidth/2;
let top = r - r * Math.sin(h)-small.offsetWidth/2;
small.style.left = lef + 'px';
small.style.top = top + 'px';
}, 10)
</script>
</body>
</html>