js面向对象（三）组件开发实现弹窗效果

以你之姓@ 2022-05-29 09:40 211阅读 0赞

组件开发：多组对象，像兄弟之间的关系（也是代码复用的一种形式）

组件开发需要解决的问题：1、参数的顺序问题  2、参数不写报错的问题

解决办法：主要就是通过设置默认参数和配置参数

话不多说，直接上代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>面向对象之组件开发之弹窗练习</title>
        <style>
            *{margin:0; padding:0;}
            .btn{width:50px; height:30px; background:yellowgreen; margin-left:30px;}
            .div1{border:1px solid black; position:absolute; left:0px; top:100px;z-index:2;}
            .title{height:30px; line-height:30px; background:lightgray;}
            .close{display:inline-block; width:28px; height:28px;border:1px solid white; float:right; text-align:center;border-radius:50%;  line-height:28px; color:red; }
            .close:hover{background:red; color:#fff;}
            #mark{z-index:1;position:absolute; left:0; top:0; background:gray; filter:alpha(opacity=50); opacity:0.5;}
        </style>
    </head>
    <body>
    <input class="btn" type="button" value="按钮1">
    <input class="btn" type="button" value="按钮2">
    <input class="btn" type="button" value="按钮3">
    
    <script>
        window.onload = function(){
    
          var  aBtn = document.getElementsByClassName('btn');
            aBtn[1].onclick = function(){
                var win2 = new Wind();
                win2.init({//配置参数
                    iNow:1,
                    w:200,
                    h:300,
                    dir:'right',
                    title:"公告"
                });
            }
            aBtn[0].onclick = function(){
                var win1 = new Wind();
                win1.init({//配置参数
                    iNow:0,
                    title:"登录"
                });
            }
            aBtn[2].onclick = function(){//配置参数
                var win1 = new Wind();
                win1.init({
                    iNow:2,
                    mark:true
                });
            }
    
    
        }
        function Wind(){
    
            this.oDiv = null;
            this.setting = {//默认参数
                w:300,
                h:300,
                dir:'center',
                title:'',
                mark:false
            }
        }
        Wind.prototype.json={};
        Wind.prototype.init = function(opt){
    
    
                extend(this.setting,opt);
                if(this.json[opt.iNow]==undefined){
                    this.json[opt.iNow]=true;
                }
                if(this.json[opt.iNow]){
                    this.fnCreate();
                    this.fnClose();
                    if(this.setting.mark){
                        this.fnMark();
                    }
                }
            this.json[opt.iNow]=false;
    
    
        }
        Wind.prototype.fnCreate = function(){
    
           this.oDiv = document.createElement('div');
           this.oDiv.className = 'div1';
           this.oDiv.innerHTML = '<div class="title"><span>'+ this.setting.title+'</span><a class="close">X</a></div><div class="content"></div>';
           document.body.appendChild(this.oDiv);
            this.setStyle();
        }
        Wind.prototype.fnMark = function(){
            var oMark = document.createElement('div');
            oMark.id = 'mark';
            document.body.appendChild(oMark);
            this.oMark = oMark;
            oMark.style.width=veiwWidth()+'px';
            oMark.style.height=veiwHeight()+'px';
    
        }
        Wind.prototype.setStyle = function(){
            this.oDiv.style.width = this.setting.w+'px';
            this.oDiv.style.height = this.setting.h +'px';
            if(this.setting.dir=='center'){
                this.oDiv.style.left = (veiwWidth() - this.oDiv.offsetWidth)/2 +'px';
                this.oDiv.style.top = (veiwHeight() - this.oDiv.offsetHeight)/2 +'px';
            }
            if(this.setting.dir=='right'){
                this.oDiv.style.left = (veiwWidth() - this.oDiv.offsetWidth)+'px';
                this.oDiv.style.top = (veiwHeight() - this.oDiv.offsetHeight) +'px';
            }
        }
        Wind.prototype.fnClose = function(){
            var oClose = this.oDiv.getElementsByClassName('close')[0];
            var This = this;
            oClose.onclick = function(){
                document.body.removeChild(This.oDiv);
                if(This.setting.mark){
                    document.body.removeChild(This.oMark);
                }
                This.json[This.setting.iNow] = true;
            };
    
        }
    
        function extend(obj1,obj2){
            for(var attr in obj2){
                obj1[attr] = obj2[attr];
            }
        }
        function veiwWidth(){
            return document.documentElement.clientWidth;
        }
        function veiwHeight(){
            return document.documentElement.clientHeight;
        }
    </script>
    </body>
    </html>