面向对象其实对于初学者来说还是比较难以理解的，以前看到一个面试题目 面向对象是什么？ 面向对象是一种思想，千万别入坑了；
这次给大家带来的是一个鼠标移动产生小球的案例，不是我不想给大家分享如何去认识面向对象，因为我觉得，做案例比什么画图理解，或者是字面意思更好理解一点；
那么来吧宝贝；
先上点简单的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>
这个案例基本上每一步，我都分析出来了，应该是比较好理解的；
自己也写了一遍；等下我上传到服务器上面给大家发个演示吧
还是一样的如果本文有上面技术问题，或者措辞问题大家可以在面留言