面向对象化矩形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="main" style="position:relative"></div>
<script>
function Rect(options) {
this._init(options);
}
Rect.prototype={
//属性
_init:function (options) {
//父标签
this.parentId=options.parentId;
//位置
this.left=options.left||100;
this.top=options.top||100;
//自身的属性
this.width=options.width||100;
this.height=options.height||50;
this.bgColor=options.bgColor||'#000';
this.borderRadius=options.borderRadius||0;
this.border=options.border||'none';
},
//行为
render:function () {
//1.获取父标签
var parentEle=document.getElementById(this.parentId);
//2.创建矩形标签
var reactEle=document.createElement('div');
parentEle.appendChild(reactEle);
reactEle.style.position='absolute';
reactEle.style.left=this.left+'px';
reactEle.style.top=this.top+'px';
reactEle.style.width=this.width+'px';
reactEle.style.height=this.height+'px';
reactEle.style.backgroundColor=this.bgColor;
reactEle.style.border=this.border;
reactEle.style.borderRadius=this.borderRadius+'px';
}
}
//创建矩形对象
var rect=new Rect({
parentId:'main',
left:200,
top:200,
500,
height:300,
bgColor:'pink',
borderRadius:20,
border:'10px solid #000'
});
rect.render();
</script>
</body>
</html>
面向对象实现无色彩球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding:0;
list-style: none;
}
html,body,div{
100%;
height:100%;
}
#box{
backgroud-colore:#000;
position: relative;
}
</style>
</head>
<body>
<div id="box">
</div>
<script src="五彩特效/js/Underscore-min.js"></script>
<script src="五彩特效/js/Ball.js"></script>
<script>
//1.获取父标签
var box=document.getElementById('box');
var ball=new Ball({
parentId:'box',
left:100,
top:200,
bgColor:'green'
});
ball.render();
</script>
</body>
</html>
function Ball(options){
this._init(options);
}
Ball.prototype={
_init:function (options) {
//1.必要属性
this.parentId=options.parentId;
this.left=options.left;
this.top=options.top;
this.r=60;
this.bgColor=options.bgColor||'red';
//2.小球变化的量
this.dX=_.random(-5,5);
this.dY=_.random(-5,5);
this.dR=_.random(1,3);//半径
},
//行为
render:function () {
var parentNode=document.getElementById(this.parentId);
var childNode=document.createElement('div');
parentNode.appendChild(childNode);
childNode.style.position='absolute';
childNode.style.left=this.left+'px';
childNode.style.top=this.top+'px';
childNode.style.width=this.r+'px';
childNode.style.height=this.r+'px';
childNode.style.borderRadius='50%';
childNode.style.backgroundColor=this.bgColor;
},
update:function () {
this.left+=this.dX;
this.top+=this.dY;
this.r-=this.dR;
//判断
if(this.r<=0){
this.r=0;
//把小球移除
ballArr=_.without(ballArr,this);
}
}
};
<!--关于创建出来的对象类型获取-->
<script type="text/html">
var obj={'name':'张三'};
// console.log(typeof obj);//object
// console.log(obj.toString());//[object Object]
console.log(obj.constructor.name);//object
var arr=[1,2,3];
// console.log(arr);
// console.log(typeof arr);//object
// console.log(arr.toString());//1,2,3
// console.log(arr.constructor);//ƒ Array() { [native code] }
// console.log(arr.constructor.name);//Array
//call 借调
Object.prototype.toString().call(arr);
console.log(arr);
var date=new Date();
// console.log(date);//Sat Apr 25 2020 21:25:11 GMT+0800 (中国标准时间)
// console.log(typeof date); //object
// console.log(date.constructor.name); //Date
Object.prototype.toString().call(date);
</script>