需求:生成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 { width: 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>