提到“躁动的小球”对于前端爱好者来说并不陌生，其书写的方式有很多种，其核心思想不过为针对浏览器的left和top值、定时器控制物体多长时间移动多长距离，怎么移动，多大的物体等等...
为了防止低版本浏览器版本兼容性差，所以我也准备了两个版本，一个普通版本，一个改写ES6写法，其大致写法如下：
<h2>一：普通版本</h2>
<b>结构部分</b>
<div id="box"></div>
注：先设置一个包围小球的盒子，当然不设置可以，那以浏览器可视窗口为基准。
<b>样式部分</b>
*{
margin:0;
padding:0;
}
#box{
height:500px;
width:600px;
margin:20px auto;
box-shadow: 0 0 3px #000;
position: relative;
}
.ball{
position: absolute;
border-radius:50%;
}
注：简单设置一下样式，盒子设置相对定位，小球相对于其设置绝对定位就可以了，小球不需要设置宽高，用JS控制随机大小和小球的颜色。下面是JS代码。
function Ball(){
//小球的宽高
this.wh = random(10,50);
//小球的横向速度
this.sx = random(-10,10,0);
//小球的纵向速度
this.sy = random(-10,10,0);
//小球的颜色
this.bg = 'rgb('+random(0,255)+','+random(0,255)+','+random(0,255)+')';
//小球的位置 x轴
this.left = random(10,600-50);
//小球的位置 y轴
this.top = random(10,500-50);
this.box = null;
}
//小球出现的位置
Ball.prototype.create = function(){
//创建一个小球
this.box = document.createElement('div');
//获取创建的小球
var box = document.getElementById('box');
//小球距离和盒子左边的距离
this.box.style.left = this.left+'px';
//小球距离和盒子上边的距离
this.box.style.top = this.top+'px';
//小球的宽度
this.box.style.width = this.wh+'px';
//小球的高度
this.box.style.height = this.wh+'px';
//小球的背景颜色
this.box.style.background = this.bg;
//小球的样式
this.box.className = 'ball';
//把小球添加到div盒子上
box.appendChild(this.box);
}
//小球移动
Ball.prototype.move = function(){
//小球撞到x轴左右两边设置反向移动，防止溢出
if(this.left < 0 || this.left > 600 - this.wh){
this.sx *= -1;
}
//小球撞到x轴上下两边设置反向移动，防止溢出
if(this.top < 0 || this.top > 500 -this.wh){
this.sy *= -1;
}
//左右移动
this.left += this.sx;
//上下移动
this.top += this.sy;
//设置盒子左边的距离
this.box.style.left = this.left+'px';
//设置盒子上边的距离
this.box.style.top = this.top+'px';
}
// 随机函数，传入最大值，最小值和不想出现的值
function random(min,max,not){
//设置随机方法
var result = Math.ceil(Math.random()*(max-min)+min);
//跳过不想粗现的值
if(result == not){
result++;
}
//返回随机值
return result;
}
//多个球
var balls = [];
//这里是设置20个球，想出现几个写几个
for(var i = 0; i < 20;i++){
//实例化一个要出现的小球对象
var ball = new Ball();
//调创建小球方法
ball.create();
balls[i] = ball;
}
// console.log(balls);
//设置定时器，这里给了10毫秒
var timer = setInterval(function(){
for(var j = 0; j < balls.length; j++){
balls[j].move();
}
},10)
注：在设置多个小球的时候不要给太多，否则很可能会卡的，当然你觉得你GPU足够强大可以试试，当然你如果非要给很多小球的话，四五千上万个话，建议用canvas做吧。强大的canvas哈哈。话入正题！上面时普通写法，基本没什么难度，写几个方法，控制边缘，调用方法就可以了。下面是改写的ES6新属性写法。
<h2>二：ES6版本</h2>
<h5>样式和结构不变，使用上面同一个</h5>
class Ball{
constructor(){
//球的宽高
this.wh = random(10,50);
//球的横向速度
this.sx = random(-10,10,0);
//球的纵向速度
this.sy = random(-10,10,0);
//球的颜色
this.bg = `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
//球的位置 x轴
this.left = random(10,600-50);
//球的位置 y轴
this.top = random(10,500-50);
this.box = null;
}
create(){
this.box = document.createElement('div');
let box = document.querySelector('#box');
this.box.style.cssText = `
left:${this.left}px;
top:${this.top}px;
width:${this.wh}px;
height:${this.wh}px;
background:${this.bg};`;
this.box.className = 'ball';
box.appendChild(this.box);
}
//小球移动
move(){
if(this.left < 0 || this.left > 600 - this.wh){
this.sx *= -1;
}
if(this.top < 0 || this.top > 500 -this.wh){
this.sy *= -1;
}
this.left += this.sx;
this.top += this.sy;
this.box.style.left = this.left+'px';
this.box.style.top = this.top+'px';
}
}
// 随机函数，传入最大值，最小值和不想出现的值
function random(min,max,not){
let result = Math.ceil(Math.random()*(max-min)+min);
if(result == not){
result++;
}
return result;
}
//多个球
let balls = [];
for(let i = 0; i < 10;i++){
let ball = new Ball();
ball.create();
balls[i] = ball;
}
// console.log(balls);
const timer = setInterval(function(){
for(let j = 0; j < balls.length; j++){
balls[j].move();
}
},10)
附：注释和上面普通写法一样，这里不多写了，喜欢的朋友留个赞吧，感谢支持！
网友评论