思路
- 画一个小球并填充颜色
- 利用公式来计算小球的移动Math.pow(9.8 * t++, 2) / 2000
- 让小球的top值慢慢变大
- 移动到固定位置后,小球停止移动
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();
})();
自我激励
在遇到挫折时,给自己一个希望。希望能够帮我们排除路上的一切障碍,激励我们向着一切美好前行。