JS重力模拟器

1.首先，新建一个大盒子我们给他起名id为box，设置css属性

#box {

  border: 3px solid black;

  overflow: hidden;

  position: relative;

  width: 1152px;

  height: 648px;

  margin: 0 auto;

  margin-top: 50px;

  overflow: hidden;

}

 

2.其次我们建立一个id名为div1的盒子作为我们的主角，也就是下落物体，css样式为

#div1{

    position: absolute;

    left: 10px;

    top: 100px;

    height: 100px;

    width: 100px;

    background-color: chartreuse;

}

 

3.接下来就要嵌入js代码了，首先我们获取所有id

    const box=document.getElementById('box');

    const renwu=document.getElementById('div1');

//值得一提的是const 是 ECMAScript 6 的命名变量的方式，赋值结束后不可修改//

 

4.我们可以像物理上的计算匀加速运动一样建立一个初始速度和最大速度（防止越加越快）

    let speed = 0;

    const maxspeed = 8;（经计算后最合适的值）

//let 也是 ECMAScript 6 的命名变量的方式，赋值结束后可修改//

 

5.现在我们来写一个函数

function down() {

        speed = speed < maxspeed ? speed + 0.3 : maxspeed;

        div1.style.top = div1.offsetTop + speed + "px";

//  div1.offsetTop中的offsetTop一定是针对已定位元素获取//

      }

 

6.ok，现在我们写一个计时器测试让他运行

   downTimer = null;

   downTimer = setInterval(down, 30);

 

7.现在他就会一直下落，先做匀加速直线运动，后做匀速直线运动，但是他可停不下来了啊，

现在就写一个当我鼠标点击父盒子box时就取消定时器在下面运行

  box.onclick = function () {

          clearInterval(downTimer); 

        }

 

8.然后写向上的模拟（我们点一下就往上给他加一下速，受重力影响会减速然后反向加速，我们这里需要加一个定时器让他点了之后速度就等于最大速度然后一直减速到0，如果小于等于0就清除当前定时器，开启downTimer，否则就一直30毫秒执行一次的减速，减速到0）

紧接着写到box.onclick里，

box.onclick = function () {

          clearInterval(downTimer); 

          clearInterval(upTimer);

          speed = maxspeed;

          upTimer = setInterval(function () {

            speed = speed - 0.7;

            if (speed <= 0) {

              clearInterval(upTimer);

              downTimer = setInterval(xialuo, 30);

            }

            div1.style.top = div1.offsetTop - speed + "px";

          }, 30);

        }

现在就可以实现重力模型了，（记住在一开始命名两个定时器  downTimer = null; upTimer= null;）