面向对象思想实现的简易留言板

利用面向对象思想实现的简易留言板，欢迎指正批评！！！

布局：

       

       

       

       

        留言

   

样式：

html,body,div,input,button,ul,li{

    margin: 0;

    padding: 0;

}

#box{

    width: 600px;

    height: 100%;

    border: 1px solid;

    margin:  100px auto;

}

#box>input,button{

    width: 300px;

    height: 30px;

    line-height: 30px;

    text-indent: 10px;

    margin: 5px;

}

ul,li{

    list-style: none;

    margin: 10px 5px;

}

逻辑代码：

// var oU = document.getElementsByTagName('ul')[0];

//父函数

function Fa(oBox,oIn,oText,oBtn){

    this.oBox = oBox;

    this.oIn = oIn;

    this.oText = oText;

    this.oBtn = oBtn;

    var that = this;

    this.oBtn.onclick = function(){

        var oLi = document.createElement('ul');

        oLi.innerHTML = `

`+oIn.value+`:`+oText.value+`

`;

        that.oBox.append(oLi);

        oIn.value = '';

        oText.value = '';

    }

}

//子函数

function Son(){

    var oBox = document.getElementById('box')

    var oIn = document.getElementsByTagName('input')[0];

    var oText = document.getElementsByTagName('input')[1];

    var oBtn = document.getElementsByTagName('button')[0];

//改变this指向

    Fa.call(this,oBox,oIn,oText,oBtn)

}

Son();