原生JavaScript實(shí)現(xiàn)五色小球

一，HTML代碼

<div id="ball"></div><script src="underscore.js"></script>  <!--Underscore.js 1.9.1  --- 這里需要添加一個 js 庫，網(wǎng)上直接搜索就可以找到下載了-->

二，CSS代碼

        *{            margin: 0;            padding: 0;            border: 0;        }        body{            width: 100%;            height:100%;            background-color: #000000;        }        #ball{            width: 100%;            height:100%;            background-color: #000000;        }

三，JavaScript代碼

 function Ball(options) {        this._init(options) ;// 初始化小球    }    // 給Ball的原型添加初始化方法, 獲取css屬性方法, 創(chuàng)建小球的方法, 渲染到頁面上的方法    Ball.prototype = {        // 初始化        _init: function(options) {            var option = options || {};            this.width = option.width || 30;            this.height = option.height || 30;            this.left = option.left;            this.top = option.top;            this.borderRadius = option.borderRadius || '50%';            this.backgroundColor = option.backgroundColor || '#0094ff';        },        // 獲取css屬性        getCssAttr:function(obj,attr){            if(obj.currentStyle){                return obj.currentStyle[attr];  // IE下            } else {                return window.getComputedStyle(obj,null).getPropertyValue(attr);// 其他瀏覽器下            }        },        // 創(chuàng)建小球        create: function() {            var _ball = document.createElement('div');            _ball.style.position = 'absolute';            _ball.style.left = this.left   'px';            _ball.style.top = this.top   'px';            _ball.style.width = this.width   'px';            _ball.style.height = this.height   'px';            _ball.style.borderRadius = this.borderRadius;            _ball.style.backgroundColor = this.backgroundColor;            return _ball;        },        // 將小球添加到body中        render: function() {            var b = this.create();            document.body.appendChild(b);            // 當(dāng)我們添加完成之后開始執(zhí)行動畫并移除小球            this.removeBall(b);        },// 執(zhí)行動畫清除小球的方法        removeBall: function(ballObj) {            var timer = null;            clearTimeout(timer);            timer = setTimeout(function() {                var rl = Math.random();                var rt = Math.random();                this.animate(ballObj, {                    width: 0,                    height: 0,                    left: this.left   parseInt(Math.random() * (rl < 0.5 ? 200 : -200)),// 設(shè)置小球隨機(jī)移動的x軸位置                    top: this.top   parseInt(Math.random() * (rt > 0.5 ? 200 : -200))// 設(shè)置小球隨機(jī)移動的y軸位置                }, function() {                    document.body.removeChild(ballObj);// 當(dāng)動畫執(zhí)行完畢之后 , 移除小球                })            }.bind(this), 100)        },// 緩動動畫        animate: function(obj, dic, fn) {            clearInterval(obj.timer);            obj.timer = setInterval(function() {                var flag = true;                for (var key in dic) {                    var begin = parseInt(this.getCssAttr(obj, key));                    var target = parseInt(dic[key]);                    var speed = (target - begin) * 0.2;                    speed = target > begin ? Math.ceil(speed) : Math.floor(speed);                    obj.style[key] = begin   speed   'px';                    if (target != begin) {                        flag = false;                    }                }                if (flag) {                    if (fn) {                        fn();                    }                    clearInterval(obj.timer);                }            }.bind(this), 60)        }    };    // 清除鼠標(biāo)點(diǎn)擊事件    document.onmousedown = function(){        return false;    };    // 鼠標(biāo)移動事件    document.onmousemove = function(event) {        if (document.body.children.length > 200) { // 當(dāng)小球創(chuàng)建了100個, 則不再創(chuàng)建            return false;        }        var event = event || window.event;        var x = event.clientX   _.random(-5, 5);// 獲取一個-5到5的隨機(jī)數(shù)        var y = event.clientY   _.random(-5, 5);        var r = parseInt(Math.random() * 256);        var g = parseInt(Math.random() * 256);        var b = parseInt(Math.random() * 256);        var bgc = 'rgb('   r   ','   g   ','   b   ')';        var ball = new Ball({            width: 50,            height: 50,            top: y - 25, // 為了保證鼠標(biāo)在小球中間我們需要減去25            left: x - 25,            borderRadius: '50%',            backgroundColor: bgc        });        ball.render();    }

四，實(shí)現(xiàn)效果