<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{width:800px;height: 500px;border: solid 1px black;margin: 20px auto;position: relative;}
.box div{width:100px;height:100px;background: red;border-radius: 50%;position: absolute;left: 0;top:0;}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
<script>
var div = document.querySelector(".box div");
// 计时器
var t;
// 底部目标
var target = 400;
// 垂直步长
var speed = 2;
// 水平步长
var speedL = 20;
// 右边的目标
var targetR = 700;
document.onclick = function(){
clearInterval(t);
t = setInterval(() => {
// 重力加速
speed++;//负的speed++会变成正的然后top越来越大最后执行if中语句。直接结束了
// 是否到底
if(target - div.offsetTop < speed){
div.style.top = target + "px";//下一次定时器执行时speed已经变成负的了，target - div.offsetTop不小于speed，执行else；
// 步长取反，实现回弹
speed = -speed * 0.9;
// 步长小于1，衰减的下限，可以停止计时器了
if(Math.abs(speed) < 1){
clearInterval(t)
}
}else{
div.style.top = div.offsetTop + speed + "px";
}
console.log(div.style.top)
// 右边目标判断
if(targetR - div.offsetLeft < speedL){
div.style.left = targetR + "px"
// 步长取反，实现回弹
speedL = -speedL;
// 当前案例，水平的移动应根据垂直是否停止而决定
}else if(Math.abs(speed) >= 1){
div.style.left = div.offsetLeft + speedL/2 + "px";
}
// 左边步长判断
if(div.offsetLeft < 0){
div.style.left = 0;
// 步长取反，实现回弹
speedL = -speedL;
// 当前案例，水平的移动应根据垂直是否停止而决定
}else if(Math.abs(speed) >= 1){//上下没听才能继续走
div.style.left = div.offsetLeft + speedL/2 + "px";
}
// console.log(speed);
}, 30);
}
</script>
</html>
长风破浪会有时，直挂云帆济沧海