画圆形运动轨迹

最新推荐文章于 2022-06-07 20:11:16 发布

congboer

最新推荐文章于 2022-06-07 20:11:16 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：圆形运动

本文链接：https://blog.youkuaiyun.com/congboer/article/details/96502263

js 专栏收录该内容

15 篇文章

订阅专栏

画圆形运动轨迹

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
            left: 600px;
            top: 300px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        //var x=a+Math.cos(angle*Math.PI/180)*r;
        //var y=b+Math.sin(angle*Math.PI/180)*r;
        //x,y盒子的位移，a,b盒子默认的位置， angle角度，r半径     angle*Math.PI/180弧度

        const oBox = document.querySelector('.box');
        let r = 200;
        let a = 200;
        let b = 300;
        let timer = null;
        let angle=0;
        oBox.onclick = function () {
            clearInterval(timer);
            timer = setInterval(function () {
                angle++;
                if(angle>=360){
                    clearInterval(timer);
                }
                oBox.style.left = a + Math.cos(angle * Math.PI / 180) * r + 'px';
                oBox.style.top = b + Math.sin(angle * Math.PI / 180) * r + 'px';
                let cDiv=document.createElement('div');
                cDiv.style.cssText=`width:5px;height:5px;background:blue;position:absolute;left:${oBox.offsetLeft}px;top:${oBox.offsetTop}px;`;
                document.body.appendChild(cDiv);
            }, 30);
        };
    </script>
</body>

</html>