???????提到“躁動(dòng)的小球”對(duì)于前端愛好者來說并不陌生，其書寫的方式有很多種，其核心思想不過為針對(duì)瀏覽器的left和top值、定時(shí)器控制物體多長時(shí)間移動(dòng)多長距離，怎么移動(dòng)，多大的物體等等...
???????為了防止低版本瀏覽器版本兼容性差，所以我也準(zhǔn)備了兩個(gè)版本，一個(gè)普通版本，一個(gè)改寫ES6寫法，其大致寫法如下：
<h2>一：普通版本</h2>
<b>結(jié)構(gòu)部分</b>
<div id="box"></div>
注：先設(shè)置一個(gè)包圍小球的盒子，當(dāng)然不設(shè)置可以，那以瀏覽器可視窗口為基準(zhǔn)。
<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%;
}
注：簡單設(shè)置一下樣式，盒子設(shè)置相對(duì)定位，小球相對(duì)于其設(shè)置絕對(duì)定位就可以了，小球不需要設(shè)置寬高，用JS控制隨機(jī)大小和小球的顏色。下面是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;
}
//小球出現(xiàn)的位置
Ball.prototype.create = function(){
//創(chuàng)建一個(gè)小球
this.box = document.createElement('div');
//獲取創(chuàng)建的小球
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);
}
//小球移動(dòng)
Ball.prototype.move = function(){
//小球撞到x軸左右兩邊設(shè)置反向移動(dòng)，防止溢出
if(this.left < 0 || this.left > 600 - this.wh){
this.sx *= -1;
}
//小球撞到x軸上下兩邊設(shè)置反向移動(dòng)，防止溢出
if(this.top < 0 || this.top > 500 -this.wh){
this.sy *= -1;
}
//左右移動(dòng)
this.left += this.sx;
//上下移動(dòng)
this.top += this.sy;
//設(shè)置盒子左邊的距離
this.box.style.left = this.left+'px';
//設(shè)置盒子上邊的距離
this.box.style.top = this.top+'px';
}
// 隨機(jī)函數(shù)，傳入最大值，最小值和不想出現(xiàn)的值
function random(min,max,not){
//設(shè)置隨機(jī)方法
var result = Math.ceil(Math.random()*(max-min)+min);
//跳過不想粗現(xiàn)的值
if(result == not){
result++;
}
//返回隨機(jī)值
return result;
}
//多個(gè)球
var balls = [];
//這里是設(shè)置20個(gè)球，想出現(xiàn)幾個(gè)寫幾個(gè)
for(var i = 0; i < 20;i++){
//實(shí)例化一個(gè)要出現(xiàn)的小球?qū)ο? var ball = new Ball();
//調(diào)創(chuàng)建小球方法
ball.create();
balls[i] = ball;
}
// console.log(balls);
//設(shè)置定時(shí)器，這里給了10毫秒
var timer = setInterval(function(){
for(var j = 0; j < balls.length; j++){
balls[j].move();
}
},10)
注：在設(shè)置多個(gè)小球的時(shí)候不要給太多，否則很可能會(huì)卡的，當(dāng)然你覺得你GPU足夠強(qiáng)大可以試試，當(dāng)然你如果非要給很多小球的話，四五千上萬個(gè)話，建議用canvas做吧。強(qiáng)大的canvas哈哈。話入正題！上面時(shí)普通寫法，基本沒什么難度，寫幾個(gè)方法，控制邊緣，調(diào)用方法就可以了。下面是改寫的ES6新屬性寫法。
<h2>二：ES6版本</h2>
<h5>樣式和結(jié)構(gòu)不變，使用上面同一個(gè)</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);
}
//小球移動(dòng)
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';
}
}
// 隨機(jī)函數(shù)，傳入最大值，最小值和不想出現(xiàn)的值
function random(min,max,not){
let result = Math.ceil(Math.random()*(max-min)+min);
if(result == not){
result++;
}
return result;
}
//多個(gè)球
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)
附：注釋和上面普通寫法一樣，這里不多寫了，喜歡的朋友留個(gè)贊吧，感謝支持！
