文章地址 https://www.cnblogs.com/sandraryan/
需求： 写一个div，让div在父级进行匀速运动，碰到父级上下左右的边框，就向反方向运动。
碰壁反弹在游戏制作中很常用~~~~
<style> .wrap { width: 1000px;height: 500px; border: 1px solid red; margin: 40px auto; position: relative; box-sizing: border-box; } .box { width: 100px;height: 100px; background-color: green; position: absolute; top: 100px;left: 200px; /* border: 1px solid red; */
/* 因为父元素有border，所以，可以给子元素也加一个边框，更好的解决方式是给父元素加box-sizing: border-box;总之就是算的时候宽高符合就行了*/ } </style>
<body>
<div class="wrap">
<div class="box"></div>
</div>
<script>
// 获取元素
var wrap = document.getElementsByTagName("div")[0];
var box = document.getElementsByTagName("div")[1];
//让元素动起来
// 添加两个变量，用于更换运动方向
var a = 1;
var b = 1;
// 获取元素的可运动空间，用父元素的宽高减去子元素的宽高
var w = wrap.offsetWidth - box.offsetWidth;
var h = wrap.offsetHeight - box.offsetHeight;
// console.log(w,h);
setInterval(function(){
// 获取元素当前left
var l = box.offsetLeft;
if(l == w || l == 0){
// 如果到达可运动空间最大值和最小值的时候，a 变成负值
a *= -1;
}
// 把元素距离左边的值每10ms加1px
// a变成负值可以改变运动方向
box.style.left = l + a + "px";
// 垂直方向同水平方向
var t = box.offsetTop;
if(t == h || t == 0){
b *= -1;
}
box.style.top = t + b + "px";
},10);
</script>
</body>