标签：doc 自身 UNC init append 创建 idt one color
<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,
width:500,
height:300,
bgColor:‘pink‘,
borderRadius:20,
border:‘10px solid #000‘
});
rect.render();
</script>
</body>
</html>
面向对象js计算功能
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/html"></script>
<script>
var Caculator={
result:0,
jia:function (num) {
this.result+=num;
return this;
},
jian:function (num) {
this.result-=num;
return this;
},
cheng:function(num){
this.result*=num;
return this;
},
chu:function (num) {
this.result/=num;
return this;
},
log:function () {
console.log(this.result);
return this;
},
clean:function () {
this.result=0;
return this;
}
};
Caculator.jia(6);
Caculator.jia(6);
Caculator.cheng(2);
Caculator.chu(3);
Caculator.jian(4);
console.jia(6).jia(6).cheng(2).chu(3).jian(4).log();
</script>
</body>
</html>
标签：doc 自身 UNC init append 创建 idt one color
原文地址：https://www.cnblogs.com/sunliyuan/p/12601074.html
