2022-05-09 原生js实现一个圆周运动

思路

在定时器中让小球的横纵坐标实时变化,把横纵坐标赋给div的left和top

要点

把圆上任一点(x,y)的等式关系表示出来就是

x=r*sin(a/180*pi)
y=r*cos(a/180*pi)
,其中a是角度,如30°

代码

<style>
    div {
        position: absolute;/*容易忘*/
        width: 20px;
        height: 20px;
        background-color: blue;
        border-radius: 50%;
        margin: 200px;
    }
</style>
<div></div>
<script>
    var div = document.querySelector("div");
    var r = 125; //半径
    var angle = 0; //角度
    var timer = setInterval(() => {
        angle++;
        if (angle == 60) clearInterval(timer);//清除定时器
        var x = r * Math.cos(angle / Math.PI * 180); //x=r*sin(a/180*pi)
        var y = r * Math.sin(angle / Math.PI * 180); //y=r*cos(a/180*pi)
        div.style.left = x + "px";
        div.style.top = y + "px";
    }, 100);
</script>