js模拟小球自由落体运动

<script>(function () {//创建小球var ball = document.createElement("div");//设置小球的样式ball.style.width = "100px";ball.style.height = "100px";ball.style.backgroundColor = "#ff6700";ball.style.borderRadius = "50%";ball.style.position = "absolute";ball.style.left = "100px";ball.style.top = "0";//将小球添加到body中document.body.appendChild(ball);//获取视口的高度var viewHeight = document.documentElement.clientHeight;//获取小球的高度var ballHeight = ball.offsetHeight;//设置高度差var maxHeight = viewHeight - ballHeight-2;//获取小球的top值var top = parseInt(ball.style.top);//设置小球的速度和加速度var v = 0;const SPEED = 1.5;//定义加速度const LOOS_SPEED = 1;//定义损耗值const INTERVAL = 20;var direction = true;//表示小球向下运动function move() {if (direction) {v += SPEED;top += v;//速度让其越来越快ball.style.top = top + "px";if (top > maxHeight) {//当到达浏览器底部的时候，速度减去损耗值，并对小球运动方向改变top = maxHeight;v -= LOOS_SPEED;direction = false;}//判断小球停止状态，并关闭定时器if (v <= 0) {v = 0;ball.style.top = maxHeight + "px";clearInterval(timer);}} else {//小球向上运动v -= SPEED;top -= v;ball.style.top = top + "px";if (v <= 0) {direction = true;}}}var timer = setInterval(move, INTERVAL );})();
</script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！