原生js如何的弹力球效果怎么做
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none
}
#ball{
position:absolute;
left:10px;
top:10px;
width:100px;
height:100px;
border-radius:50%;
background-color:pink;
}
</style>
</head>
<body style="height:1000px;">
<input id="btn" type="button" value="动起来" />
<div id="ball">
</div>
</body>
</html>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
window.onload = function(){
$("btn").onclick = function(){
let left = 10;
let top = 10;
let leftInc = 1;//横向的增量
let topInc = 1;//纵向的增量
let myTimer = setInterval(function(){
//1、改变left和top的值（javascript中的数据）；
left= left+leftInc;
top = top+topInc;
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
//2、left和top的合法性判断（判断边缘）；
if(left-scrollLeft<=0){
leftInc = 1;
//}else if(top-横向滚动掉的距离>可视区域的宽度-球球的宽度){
}else if(left-scrollLeft>clientWidth-$("ball").offsetWidth){
leftInc = -1;
}
if(top-scrollTop<=0){
topInc = 1;
//}else if(top-纵向滚动掉的距离>可视区域的高度-球球的高度){
}else if(top-scrollTop>clientHeight-$("ball").offsetHeight){
topInc = -1;
}
//3、改变外观（UI）
$("ball").style.left = left+"px";
$("ball").style.top = top+"px";
},5);
}
}
</script>