文章地址 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 {
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>