计算机模拟双星系统

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>双星</title>
</head>
<style>
#earth{width:24px;height:24px;background: orange;margin-left: -12px;margin-top: -12px; left: 0;bottom: 0; position: absolute; border-radius:50%;z-index: -9;}
#moon{width:14px; height:14px; border-radius:50%; background:red;  margin-left:-7px;margin-top:-7px; position:absolute;}
.box{position:relative;top:325px; left:50%;margin-top:-12px;margin-left:-12px;}
.line1{width:600px;height:2px; background:red; position:absolute;left: 2px;top:-1px;}
.line2{width:1px;height:400px; background:black; position:absolute;left:400px;top:-200px}
.oxy{position: absolute;left: 0;right: 0; width: 4px;height: 4px;background: seagreen;margin-top: -2px;margin-left: -2px;z-index: 999;}

</style>
<body>
    <div class="box">
            <div id='earth'></div>
            <div class="oxy"></div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div id='moon'></div>
            <div id='gj'></div>
            <div id='gje'></div>

    </div>

    <script>
        var earth=document.getElementById('earth');
        var moon=document.getElementById('moon');
        var gj=document.getElementById('gj'); //月亮的轨迹容器div
        var gje=document.getElementById('gje'); //地球的轨迹容器div
        var count=0;     //计步器，用于计算走几个dt画一次轨迹点
        var G=100000;  //万有引力常数
        var m1=100;//地球的质量
        var m2=10;//月亮的质量

        var x=400;   //月亮的x轴坐标
        var y=0;     //月亮的y轴坐标
        var xe=0;  //地球的x坐标
        var ye=0;  //地球的y坐标

        var r=Math.sqrt(x*x+y*y);   //月亮到月亮的初始距离
        var ax=0;   //月亮在x轴方向的初始加速度
        var ay=0;   //月亮在y轴方向的初始加速度
        var axe=0;  //地球在x轴方向的初始加速度
        var aye=0;  //地球在y轴方向的初始加速度

        var vx=0;         //月亮在x轴方向的初始速度分量
        var vy=-100;        //月亮在y轴方向的初始速度分量
        var vxe=0;        //地球在x轴方向的初始速度分量
        var vye=0 ;       //地球在y轴方向的初始速度分量

        var dt=10;        //取的微分的间隔时间，在此期间把万有引力看作近似不变，以得到近似轨迹;单位是毫秒
        var split=100;   //把dt再平均分多少份，以用更短的时间求更精确的值
        moon.style.left=x+'px';  //给月亮的x坐标赋值，浏览器显示用
        moon.style.bottom=y+'px';   //给月亮的y坐标赋值，浏览器显示用
        earth.style.left=xe+'px';  //给月亮的x坐标赋值，浏览器显示用
        earth.style.bottom=ye+'px';   //给月亮的y坐标赋值，浏览器显示用


        setInterval(move,dt); //开定时器，动起来

        function move(){
            var st=dt/(split*1000);//毫秒换算成秒的单位

            for(i=0;i<split;i++){
                x=x+vx*st;
                y=y+vy*st;
                xe=xe+vxe*st;
                ye=ye+vye*st;

                r=Math.sqrt((x-xe)*(x-xe)+(y-ye)*(y-ye));
                ax=(-(x-xe)*m1/(r*r*r))*G;
                ay=(-(y-ye)*m1/(r*r*r))*G;
                axe=((x-xe)*m2/(r*r*r))*G;
                aye=((y-ye)*m2/(r*r*r))*G;

                vx=vx+ax*st;
                vy=vy+ay*st;
                vxe=vxe+axe*st;
                vye=vye+aye*st;
            }

            moon.style.left=x+'px';
            moon.style.bottom=y+'px';
            earth.style.left=xe+'px';   
            earth.style.bottom=ye+'px';    
            //添加轨迹元素

            count++;
            var obj='<div style="width:4px;z-index:-1; height:4px;position:absolute;background:red;left:'+x+'px;bottom:'+y+'px;"></div>';
            var obje='<div style="width:4px;z-index:-1; height:4px;position:absolute;background:orange;left:'+xe+'px;bottom:'+ye+'px;"></div>';
            if(count%5==0){
                gj.innerHTML+=obj;
                gje.innerHTML+=obje;
            }


        }



    </script>
</body>
</html>
DEV Community

计算机模拟双星系统

Top comments (0)
