HTML用javascript实现简单的小球掉落弹起效果_html一个球从上面掉落在弹起来知道归零-CSDN博客

本文链接：https://blog.csdn.net/qq_54024776/article/details/120199794

演示效果

首先，先创建一个div限制小球下落的范围。

<div class="cont">   </div>

给该范围div设置样式

.cont {
            width: 1000px;
            height: 600px;
            background: #eee;
            margin: 20px auto;
            position: relative;
        }

然后在类名为cont的div里面再创建一个div,并设置样式让他成为一个球的样子

<div class="box"></div>

.box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            border-radius: 50%;
        }

现在，开始写js代码

首先，获取小球和范围的节点

var box = document.querySelector('.box');
var cont = document.querySelector('.cont');

在来，我们先声明两个变量，分别作为重力加速度和下落的初速度。因为只是模拟，所以重力加速度设置小一点。

var g=2;
var speed=0;

小球的最大下落距离为范围盒子的高度减去小球的高度。所以要声明一个值来保存小球的最大下落距离，之后用来判断小球是否超出范围。

var targe = cont.offsetHeight - box.offsetHeight;

设定点击小球时，小球开始下落，给小球添加上点击事件

box.onclick = function() {
 

}

因为小球是自动下落的，所以用定时器来实现小球下落的过程,先声明一个定时器的标识time,然后在创建定时器，

var time = '';

time = setInterval(function(){


}，30)

下面的代码都写在定时器里面

先给小球一个速度，让小球开始下落

speed += g;

小球下落的代码为

box.style.top = box.offsetTop + speed + 'px';

判断小球是否到达边界

if (box.offsetTop > targe) {


}

小球到达边界时，强制让小球的位置为最大下落距离

 box.style.top = targe+'px';

再让速度改变方向，让小球回弹，因为有速度的损失，所以速度要减小一些，且应为这时小球是向上运动，所以速度方向和加速度方向是相反的，速度在减小。

speed = -(speed - g) * 0.9;

当小球速度的绝对值小于1时，小球就弹不起来了，这时我们清除定时器。

clearInterval(time);

这样，小球下落回弹就做好了，下面是完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .cont {
            width: 1000px;
            height: 600px;
            background: #eee;
            margin: 20px auto;
            position: relative;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="cont">
        <div class="box"></div>
    </div>
    <script>
        //获取节点
        var box = document.querySelector('.box');
        var cont = document.querySelector('.cont');
        //声明一个重力加速度
        var g = 2;
        //小球的初始下落速度为0
        var speed = 0;
        //设定小球的最大目标值
        var targe = cont.offsetHeight - box.offsetHeight;
        //设定定时器的唯一标识；
        var time = '';
        //给小球绑定点击事件
        box.onclick = function() {
            //先清除一下定时器，防止重复点击小球时定时器发生累加。
            clearInterval(time);
            //点击小球，启动计时器。
            time = setInterval(function() {
                //给小球一个加速度，小球下落
                speed += g;
                //如果小球碰到边框，则小球弹回
                box.style.top = box.offsetTop + speed + 'px';
                if (box.offsetTop > targe) {
                    //强制将小球移动到边框；
                    box.style.top = targe + 'px';
                    //小球开始回弹
                    speed = -(speed - g) * 0.9;
                    //当小球的速度的绝对值小于1时
                    if (Math.abs(speed) < 1) {
                        clearInterval(time);
                    }
                }

            }, 30)

        }
    </script>
</body>

</html>