1、h5实现自由落体效果图
video.gif
2、h5实现自由落体源码
<!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; // 定时器
function run(e) {
clearInterval(_int);
box = e;
box.style.top = '1px'
gravity = 1; // 重力加速度
velocity = 1; // 初速度
_int = setInterval(function () {
// 更新速度（根据F=ma，这里忽略质量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))
// 更新位置（根据s = ut + 0.5at^2，这里忽略空气阻力）
box.style.top = (parseInt(box.style.top) + velocity) + 'px';
// 重置速度，模拟摩擦力
if (velocity > 0) {
velocity -= 1; // 模拟摩擦力（这里假设摩擦力恒定）
}
if (parseInt(box.style.top) >= '600') {
box.style.top = '1px'
}
}, 10); // 10毫秒更新一次
}
</script>
</body>
</html>
