???????提到“躁動的小球”對于前端愛好者來說并不陌生，其書寫的方式有很多種，其核心思想不過為針對瀏覽器的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(){
            //創(chuàng)建一個小球
            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);
        }

        //小球移動
        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();
            //調創(chuàng)建小球方法
            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)

附：注釋和上面普通寫法一樣，這里不多寫了，喜歡的朋友留個贊吧，感謝支持！