文章地址 https://www.cnblogs.com/sandraryan/
需求：生成n个小球，让他们在一个大盒子中碰壁反弹，要求小球随机颜色，大小，初始位置，运动速度。
思路分析： 创建小球随机颜色等，添加到页面中。然后让小球发生移动。
ps：计时器超级耗性能的qwq
<!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>
.wrap {
900px;
height: 500px;
box-shadow: 0 0 20px black;
margin: 50px auto;
position: relative;
border-radius: 8px;
}
.wrap div {
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<!-- 放置小球的容器 -->
<div class="wrap"></div>
<script>
var wrap = document.getElementsByClassName("wrap")[0];
//封装随机数函数
function rn(a, b) {
return Math.round(Math.random() * (a - b) + b);
}
// 封装函数创建小球
function createBall() {
//创建元素
var el = document.createElement("div");
// 随机元素的颜色 大小 速度 位置
// 随机一个宽高（元素宽高相同）
el.w = rn(10, 30);
el.style.width = el.w + "px";
el.style.height = el.w + "px";
// 随机透明度，并取小数点后一位
//不能用之前封装的rn()，因为他四舍五入了，只能取到整数
var op = Math.random().toFixed(1);
el.style.backgroundColor = "rgba(" + rn(0, 255) + "," + rn(0, 255) + "," + rn(0, 255) + "," + op + ")";
// 计算left top 可以到达的最大值
var ml = wrap.offsetWidth - el.w;
var mt = wrap.offsetHeight - el.w;
// 随机生成在wrap中
// 位置为0 到可使用的最大值
el.style.left = rn(0, ml) + "px";
el.style.top = rn(0, mt) + "px";
// 如果生成的速度为0，让他直接变成1；
// 或运算符短路操作，前一个值为0，会看后面的值能否决定结果
// 或运算符只要有一个为真，全都为真
el.vx = rn(-2, 3) || 1;
el.vy = rn(-2, 3) || 1;
//生成元素添加至父元素wrap
wrap.appendChild(el);
}
// 封装函数 循环产生多个小球
function cerateAll() {
// 创建100个小球
for (var i = 0; i < 100; i++) {
createBall();
}
}
cerateAll();
// 让所有小球发生移动
function ballMove() {
// 获取所有小球
var balls = document.querySelectorAll(".wrap div");
// 添加计时器
setInterval(function () {
// 实现每个小球的碰壁反弹
// 循环遍历所有小球，改变他们的left top值
for (var i = 0; i < balls.length; i++) {
// 获取小球当前left top
// 当前dom节点的操作指针复制给b，不是传递一个值
var b = balls[i];
var l = b.offsetLeft;
var t = b.offsetTop;
// 设置碰壁条件
// 到达父级元素边框，改变运动方向
if (l <= 0 || l > wrap.offsetWidth - b.w) {
b.vx *= -1;
}
if (t <= 0 || t >= wrap.offsetHeight - b.w) {
b.vy *= -1;
}
// 在此基础上加上增量 当前的值累加速度 设置为新的left top
b.style.left = l + b.vx + "px";
b.style.top = t + b.vy + "px";
}
}, 50);
}
ballMove();
</script>
</body>
</html>