JS模擬自由落體活動

爲了能看到效果,這裏放緩了速度

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();
})()
發佈了35 篇原創文章 · 獲贊 10 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章