小球自由落体

思路

1. 画一个小球并填充颜色
2. 利用公式来计算小球的移动Math.pow(9.8 * t++, 2) / 2000
3. 让小球的top值慢慢变大
4. 移动到固定位置后，小球停止移动

css代码

body {
    
    
   height: 100%;
   position: absolute;
}

.circle {
    
    
  width: 50px;
  height: 50px;
  background-color: brown;
  border-radius: 50%;
  position: absolute;
  top: 0px;
}

html代码

<div class="circle" id="circle"></div>

js代码

(function () {
    
    
            // h = 1/2 gt^2
            var h1 = document.documentElement.clientHeight;
            var h2 = 0;
            var t = 0;

            var lastTime = new Date().getTime();
            var circle = document.getElementById("circle");
            function run() {
    
    
                h2 = Math.pow(9.8 * t++, 2) / 2000;
                circle.style.top = h2 - 70 + "px";
                console.log(h2);
                if (h1 - h2 <= 0) {
    
    
                    return;
                }
                requestAnimationFrame(run);
            }
            run();
        })();

自我激励

在遇到挫折时，给自己一个希望。希望能够帮我们排除路上的一切障碍，激励我们向着一切美好前行。