面向对象原生JavaScript案例炫彩小球

时间：2023-05-27 22:07:32

面向对象其实对于初学者来说还是比较难以理解的，以前看到一个面试题目 面向对象是什么？ 面向对象是一种思想，千万别入坑了；

这次给大家带来的是一个鼠标移动产生小球的案例，不是我不想给大家分享如何去认识面向对象，因为我觉得，做案例比什么画图理解，或者是字面意思更好理解一点；

那么来吧宝贝；

先上点简单的CSS

<style type="text/css">

        *{margin: 0;padding: 0;}

        body{background: #000;}

</style>

再来HTML

<div id="box">

        <div class="ball"></div>

</div>

最后重头戏来了JavaScript

<script>

        //构造一个函数

        function Ball(x,y,r){

            //x,y,r等待传参

            this.x = x;

            this.y = y;

            this.r = r;

            //透明度

            this.opacity=0.5;

            //随机生成散发的位置，如果等于零，则再次循环随机

            do{

                this.dx = parseInt(Math.random()*10)-5;

                this.dy = parseInt(Math.random()*10)-5;

            }while(this.dx ==0 && this.dy ==0)

            //颜色放入数组

            var colors = ["#996","#c1c","#c63","#85a","#19c","#6cc","#96c",'#f90', '#ff0', '#09c', '#c06', '#f99', '#9c3','#6cc', '#9cc'];

            //随机获取颜色数组的下标

            this.color = colors[parseInt(Math.random()*colors.length)];

            //初始化

            this.init();

            //把当前这个小球放入下面的数组里面

            BallArr.push(this);

        }

        //初始化样式,上树

        Ball.prototype.init = function(){

            //生成div放入this.dom中

            this.dom = document.createElement("div");

            //在#box中插入这个(this.dom)里面

            document.getElementById("box").appendChild(this.dom);
　　　　　　　//当然大家也可以不用把样式也在这里面可以放到css里面然后加一个className

            //小球样式

            //小球定位

            this.dom.style.position = "absolute";

            //left值等于x轴减去半径

            this.dom.style.left = this.x - this.r +"px";

            //top值等于y轴减去半径

            this.dom.style.top = this.y - this.r +"px";

            //width等于半径*2

            this.dom.style.width = this.r*2 +"px";

            //height等于半径*2

            this.dom.style.height = this.r*2 +"px";

            //backgroundColor等于上面颜色的随机数组

            this.dom.style.backgroundColor = this.color;

            //div方体变圆形

            this.dom.style.borderRadius = "50%";

            //拿到透明度

            this.dom.style.opacity = this.opacity;

        }

        //更新移动

        Ball.prototype.update = function(){

            //移动的位置等于x,y加上自己

            this.x += this.dx;

            this.y += this.dy;

            //更新的时候半径慢慢变小

            this.r--;

            //如果0大于等于更新的半径则执行goDiu()移除;

            if(this.r <=0){

                this.goDiu()

            }

            //只更新半径是没用的,所以我们也要把上面的样式也整体更新一下,不然小球很生硬

            this.dom.style.left = this.x - this.r +"px";

            this.dom.style.top = this.y - this.r +"px";

            this.dom.style.width = this.r * 2 +"px";

            this.dom.style.height = this.r * 2 +"px";

        }

        //移除小球

        Ball.prototype.goDiu = function(){

            //找到父元素(#box)才能删掉子元素(this.dom)

            document.getElementById("box").removeChild(this.dom);

            //for循环进行删除,反过来循环才不会影响数组的位置和判断

            for(var i = BallArr.length-1; i>=0; i--){

                //如果BallArr下标等于当前的数组的下标

                if(BallArr[i]=== this){

                    //删除BallArr的一项

                    BallArr.splice(i,1);

                }

            }

        }

        // console.log(this.x);

        // 每次new一个Ball就放到这个数组里面

        var BallArr = [];

        //创建一个定时器,每20毫秒更新一次

        setInterval(function(){

            //循环BallArr的下标来更新

            for(var i = 0;i<BallArr.length;i++){

                BallArr[i].update();

            }

        },20)

        //添加鼠标移动DOM操作

        document.onmousemove = function(e){

            //获取鼠标移动的x轴位置

            var x = e.clientX;

            //获取鼠标移动的y轴位置

            var y = e.clientY;

            //传参x,y,半径;

            new Ball(x,y,30);

        }

    </script>

这个案例基本上每一步，我都分析出来了，应该是比较好理解的；

自己也写了一遍；等下我上传到服务器上面给大家发个演示吧

还是一样的如果本文有上面技术问题，或者措辞问题大家可以在面留言

相关文章