js面向对象思想话矩形

<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>

来源：https://www.cnblogs.com/sunliyuan/p/12601074.html

标签