1、h5實(shí)現(xiàn)自由落體效果圖
video.gif
2、h5實(shí)現(xiàn)自由落體源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Fall Animation</title>
<style>
#fallingBox {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 1px;
left: 50px;
}
</style>
</head>
<body>
<h1 id="t1"></h1>
<div id="fallingBox" onclick="run(this)"></div>
<script>
// var box = document.getElementById('fallingBox');
var box = document.getElementById('fallingBox');
var gravity = 1; // 重力加速度
var velocity = 0; // 初速度
var _int = null; // 定時(shí)器
function run(e) {
clearInterval(_int);
box = e;
box.style.top = '1px'
gravity = 1; // 重力加速度
velocity = 1; // 初速度
_int = setInterval(function () {
// 更新速度（根據(jù)F=ma，這里忽略質(zhì)量m）
velocity += gravity;
document.getElementById("t1").innerText = ("box.style.top>>" + box.style.top)
+ ("\ngravity>>" + gravity)
+ ("\nvelocity>>" + velocity)
+ ("\nparseInt(box.style.top)>>" + parseInt(box.style.top))
+ ("\n(parseInt(box.style.top) + velocity)>>" + (parseInt(box.style.top) + velocity))
// 更新位置（根據(jù)s = ut + 0.5at^2，這里忽略空氣阻力）
box.style.top = (parseInt(box.style.top) + velocity) + 'px';
// 重置速度，模擬摩擦力
if (velocity > 0) {
velocity -= 1; // 模擬摩擦力（這里假設(shè)摩擦力恒定）
}
if (parseInt(box.style.top) >= '600') {
box.style.top = '1px'
}
}, 10); // 10毫秒更新一次
}
</script>
</body>
</html>
