js写一个行星运转的效果

最新推荐文章于 2024-01-04 21:30:00 发布

从人到猿

最新推荐文章于 2024-01-04 21:30:00 发布

阅读量1.1k

点赞数 2

分类专栏：学习笔记文章标签： JavaScript写太阳系行星圆周运动的实例

本文链接：https://blog.csdn.net/qq_39200185/article/details/95486529

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以太阳系为例：
以太阳为中心点，水金木土地火天海依次围绕着太阳做圆周运动（嗯。。。假设为圆周运动吧）。以太阳为圆心点，所以在求行星做圆周运动时的半径就是行星的圆心点到太阳的圆心点，我们可以计算出太阳和行星的圆心点，我们可以通过函数获得行星和太阳的left和top值，left和top值在加上盒子本身的宽度。得到这些数据后我们就可以通过三角函数来算出行星运动的轨迹了，完成这些工作后我们就可以写代码了。

首先我们写一个静态的布局，用到HTML和CSS，以下是HTML和CSS的代码：

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

<head>
    <meta charset="UTF-8">
    <title>太阳系</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* background-image: url(img/timg.jpg ); */
            height: 2000px;
        }

        /* 太阳 */
        #sunId {
            left: 700px;
            top: 700px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
        }

        #sunId img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        /* 水星 */
        #mercuryId {
            position: absolute;
            left: 745px;
            top: 660px;
            width: 10px;
            height: 10px;
            background-color: gray;
            border-radius: 50%;
        }

        #mercuryB {
            position: absolute;
            left: 665px;
            top: 665px;
            width: 169px;
            height: 169px;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }

        /* 金星 */
        #venusId {
            position: absolute;
            left: 740px;
            top: 600px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        #venusId img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        #venusB {
            position: absolute;
            left: 610px;
            top: 610px;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }

        /* 地球 */
        #earthId {
            position: absolute;
            left: 740px;
            top: 520px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        #earthId img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        #earthB {
            position: absolute;
            left: 530px;
            top: 530px;
            width: 440px;
            height: 440px;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }

        /* 火星 */
        #marsId {
            position: absolute;
            left: 742px;
            top: 432px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
        }

        #marsId img {
            width: 16px;
            height: 16px;
            border-radius: 50%;
        }

        #marsB {
            position: absolute;
            left: 440px;
            top: 440px;
            width: 620px;
            height: 620px;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }

        /* 木星 */
        #jupiterId {
            position: absolute;
            left: 730px;
            top: 360px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        #jupiterId img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        #jupiterB {
            position: absolute;
            left: 380px;
            top: 380px;
            width: 740px;
            height: 740px;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }

        /* 土星 */
        #staurnId {
            position: absolute;
            left: 720px;
            top: 300px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }

        #staurnId img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }

        #staurnB {
            position: absolute;
            left: 330px;
            top: 330px;
            width: 840px;
            height: 840px;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }


        /* 天王星 */
        #uranusId {
            position: absolute;
            left: 730px;
            top: 240px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        #uranusId img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        #uranusB {
            position: absolute;
            left: 260px;
            top: 260px;
            width: 980px;
            height: 980px;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }

        /* 海王星 */
        #neptuneId {
            position: absolute;
            left: 730px;
            top: 180px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        #neptuneId img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        #neptuneB {
            position: absolute;
            left: 200px;
            top: 200px;
            width: 1100px;
            height: 1100px;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }
    </style>
</head>

<body>
    <input type="button" value="测试" id="btn">
    <div id="sunId">
        <img src="imgs/0.jpg" alt="">
    </div>
    <div id="mercuryB">
    </div>
    <div id="mercuryId">
    </div>
    <div id="venusB"></div>
    <div id="venusId">
        <img src="imgs/1.jpg" alt="">
    </div>
    <div id="earthB"></div>
    <div id="earthId">
        <img src="imgs/2.jpg" alt="">
    </div>
    <div id="marsB"></div>
    <div id="marsId">
        <img src="imgs/3.jpg" alt="">
    </div>
    <div id="jupiterB"></div>
    <div id="jupiterId">
        <img src="imgs/4.jpg" alt="">
    </div>
    <div id="staurnB"></div>
    <div id="staurnId">
        <img src="imgs/1.gif" alt="">
    </div>
    <div id="uranusB"></div>
    <div id="uranusId">
        <img src="imgs/5.jpg" alt="">
    </div>
    <div id="neptuneB"></div>
    <div id="neptuneId">
        <img src="imgs/6.jpg" alt="">
    </div>
</body>

</html>

嗯，可以看到这个布局其实不是很好，又长又乱，难理解,我们拿出一个行星的代码来看一下：

<div id="venusB"></div>
    <div id="venusId">
        <img src="imgs/1.jpg" alt="">
</div>




 /* 金星 */
        #venusId {
            position: absolute;
            left: 740px;
            top: 600px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        #venusId img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        #venusB {
            position: absolute;
            left: 610px;
            top: 610px;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }

这样看着好像清楚点了

给它加一下js让它转起来

// 金星
    function venus() {
        let degree = 0;
        let startLeft = 750;
        let startTop = 610;
        let r = 140;
        let myTimer = setInterval(() => {
            // 一、数据修改
            //1.计算数据
            degree++;
            let hu = Math.PI / 180 * degree;

            let left1 = startLeft + r * Math.sin(hu);
            let top1 = startTop + (r - r * Math.cos(hu));

            //2.边界判断
            if (degree % 360 == 0) {
                degree = 0;
            }


            // 二、修改外观
            $$("#venusId").style.left = (left1 - 10) + "px";
            $$("#venusId").style.top = (top1 - 10) + "px";
        }, 10);
    }

其实所有的运动我们都可以分为两大部分：
一、数据修改
1.数据计算
2.边界处理
二、修改外观

只要牢记这几步，运动函数的核心就掌握了

然后我们给所有的行星都加上运动函数，让它们转起来
js代码如下：

<script>
    // 水星
    function mercury() {
        // 圆心点：750，750
        //半径:195
        let degree = 0;
        let startLeft = 750;
        let startTop = 665;
        let r = 85;
        let myTimer = setInterval(() => {
            // 一、数据修改
            //1.计算数据
            degree++;
            let hu = Math.PI / 180 * degree;

            let left1 = startLeft + r * Math.sin(hu);
            let top1 = startTop + (r - r * Math.cos(hu));

            //2.边界判断
            if (degree % 360 == 0) {
                degree = 0;
            }


            // 二、修改外观
            $$("#mercuryId").style.left = (left1 - 5) + "px";
            $$("#mercuryId").style.top = (top1 - 5) + "px";
        }, 5);
    }
    // 金星
    function venus() {
        // 圆心点：750，750
        //半径:195
        let degree = 0;
        let startLeft = 750;
        let startTop = 610;
        let r = 140;
        let myTimer = setInterval(() => {
            // 一、数据修改
            //1.计算数据
            degree++;
            let hu = Math.PI / 180 * degree;

            let left1 = startLeft + r * Math.sin(hu);
            let top1 = startTop + (r - r * Math.cos(hu));

            //2.边界判断
            if (degree % 360 == 0) {
                degree = 0;
            }


            // 二、修改外观
            $$("#venusId").style.left = (left1 - 10) + "px";
            $$("#venusId").style.top = (top1 - 10) + "px";
        }, 10);
    }
    //地球
    function earth() {
        // 圆心点：750，750
        //半径:195
        let degree = 0;
        let startLeft = 750;
        let startTop = 530;
        let r = 220;
        let myTimer = setInterval(() => {
            // 一、数据修改
            //1.计算数据
            degree++;
            let hu = Math.PI / 180 * degree;

            let left1 = startLeft + r * Math.sin(hu);
            let top1 = startTop + (r - r * Math.cos(hu));

            //2.边界判断
            if (degree % 360 == 0) {
                degree = 0;
            }


            // 二、修改外观
            $$("#earthId").style.left = (left1 - 10) + "px";
            $$("#earthId").style.top = (top1 - 10) + "px";
        }, 15);
    }
    // 火星
    function mars() {
        // 圆心点：750，750
        //半径:195
        let degree = 0;
        let startLeft = 750;
        let startTop = 440;
        let r = 310;
        let myTimer = setInterval(() => {
            // 一、数据修改
            //1.计算数据
            degree++;
            let hu = Math.PI / 180 * degree;

            let left1 = startLeft + r * Math.sin(hu);
            let top1 = startTop + (r - r * Math.cos(hu));

            //2.边界判断
            if (degree % 360 == 0) {
                degree = 0;
            }
            // 二、修改外观
            $$("#marsId").style.left = (left1 - 8) + "px";
            $$("#marsId").style.top = (top1 - 8) + "px";
        }, 20);
    }
    //木星
    function jupiter() {
        // 圆心点：750，750
        //半径:195
        let degree = 0;
        let startLeft = 750;
        let startTop = 380;
        let r = 370;
        let myTimer = setInterval(() => {
            // 一、数据修改
            //1.计算数据
            degree++;
            let hu = Math.PI / 180 * degree;

            let left1 = startLeft + r * Math.sin(hu);
            let top1 = startTop + (r - r * Math.cos(hu));

            //2.边界判断
            if (degree % 360 == 0) {
                degree = 0;
            }
            // 二、修改外观
            $$("#jupiterId").style.left = (left1 - 20) + "px";
            $$("#jupiterId").style.top = (top1 - 20) + "px";
        }, 30);
    }
    //土星
    function saturn() {
        // 圆心点：750，750
        //半径:195
        let degree = 0;
        let startLeft = 750;
        let startTop = 330;
        let r = 420;
        let myTimer = setInterval(() => {
            // 一、数据修改
            //1.计算数据
            degree++;
            let hu = Math.PI / 180 * degree;

            let left1 = startLeft + r * Math.sin(hu);
            let top1 = startTop + (r - r * Math.cos(hu));

            //2.边界判断
            if (degree % 360 == 0) {
                degree = 0;
            }
            // 二、修改外观
            $$("#staurnId").style.left = (left1 - 30) + "px";
            $$("#staurnId").style.top = (top1 - 30) + "px";
        }, 50);
    }
    //天王星
    function uranus() {
        // 圆心点：750，750
        //半径:195
        let degree = 0;
        let startLeft = 750;
        let startTop = 260;
        let r = 490;
        let myTimer = setInterval(() => {
            // 一、数据修改
            //1.计算数据
            degree++;
            let hu = Math.PI / 180 * degree;

            let left1 = startLeft + r * Math.sin(hu);
            let top1 = startTop + (r - r * Math.cos(hu));

            //2.边界判断
            if (degree % 360 == 0) {
                degree = 0;
            }
            // 二、修改外观
            $$("#uranusId").style.left = (left1 - 20) + "px";
            $$("#uranusId").style.top = (top1 - 20) + "px";
        }, 80);
    }
    //海王星
    function neptune() {
        // 圆心点：750，750
        //半径:195
        let degree = 0;
        let startLeft = 750;
        let startTop = 200;
        let r = 550;
        let myTimer = setInterval(() => {
            // 一、数据修改
            //1.计算数据
            degree++;
            let hu = Math.PI / 180 * degree;

            let left1 = startLeft + r * Math.sin(hu);
            let top1 = startTop + (r - r * Math.cos(hu));

            //2.边界判断
            if (degree % 360 == 0) {
                degree = 0;
            }
            // 二、修改外观
            $$("#neptuneId").style.left = (left1 - 20) + "px";
            $$("#neptuneId").style.top = (top1 - 20) + "px";
        }, 85);
    }
    window.onload = function () {
        mercury();
        venus();
        earth();
        mars();
        jupiter();
        saturn();
        uranus();
        neptune();
    }
    function $$(str) {
        if (str.charAt(0) == "#") {
            return document.getElementById(str.substring(1));
        } else if (str.charAt(0) == ".") {
            return document.getElementsByClassName(str.substring(1));
        } else {
            return document.getElementsByTagName(str);
        }
    }
</script>

好长的代码，好多都是重复使用的，如果可以封装一下使用起来就方便多了。

还未解决的问题，地球的卫星月亮的运动，由于地球在自转的同时还在公转，它的left和top时刻都在变化，所以没有做出来。

好了，我说一下我写的时候遇到的一些难点吧：
1.计算太阳和行星的圆心
2.用三角函数计算行星的运动轨迹，就是动态的left和top
3.行星的轨迹处理

可能是我笨吧，搞了好久才出来，这里有个大胆的想法，我们把这个运动函数做成多属性的封装，再做行星的运转时就可以直接用函数调用了，通过传不同的属性值就可以做出来，又简单还实用。

假如有大佬看到了可以帮帮我喔，谢谢。（救救这个可怜的猴吧）。

好了，最后我们来看一下效果吧

在这里插入图片描述
没有加背景图，看着好丑。
月球做不出来太遗憾了。
代码可下载，点击即可

从人到猿

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js写一个行星运转的效果

以太阳系为例：以太阳为中心点，水金木土地火天海依次围绕着太阳做圆周运动（嗯。。。假设为圆周运动吧）。以太阳为圆心点，所以在求行星做圆周运动时的半径就是行星的圆心点到太阳的圆心点，我们可以计算出太阳和行星的圆心点，我们可以通过函数获得行星和太阳的left和top值，left和top值在加上盒子本身的宽度。得到这些数据后我们就可以通过三角函数来算出行星运动的轨迹了，完成这些工作后我们就可以写代码了。...
复制链接

扫一扫

专栏目录