为了能看到效果,这里放缓了速度
body{
height: 100%;
position: absolute;
}
.circle{
width: 50px;
height: 50px;
background: red;
border-radius: 50%;
position: absolute;
top: 0px;
}
<div class="circle" id="circle"></div>
(function(){
//h = 1/2 gt^2
var h1 = document.documentElement.clientHeight, h2=0, 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();
})()