js模拟微信聊天窗口

Posted 2020-10-06 carol72

总结：

　　1.overflow: auto;可以使滚动条在内容溢出时才出现

　　2.使滚动条一直保持在底端cont.scrollTop = cont.scrollHeight;

 

　html

<div class="box">
    <div class="top">哈哈哈</div>
    <div class="cont" id="cont"></div>
    <div class="bot">
        <a href="javascript:;" class="fir"></a>
        <input type="text" name="txt" id="txt"/>
        <input type="button" name="take" id="take" value="发送" />
    </div>
</div>

CSS

*{
    margin: 0;
    padding: 0;    
}
.box{
    width: 250px;
    height: 400px;
    margin: 10px auto 0;
    background:       url(http://f2.dn.anqu.com/down/NzlkMQ==/allimg/1309/54-130922101359.jpg) no-repeat;
    background-size: cover;
}
.top{
    width: 100%;
    height: 30px;
    background: #2C333A;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-indent: 10px;
    line-height: 30px;
}
.cont{
    height: 330px;
    width: 100%;
    overflow: auto;
}
.bot{
    width: 100%;
    height: 30px;
    padding: 5px 0;
    background: #CCC;
    line-height: 40px;
}
.bot a{
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-left: 10px;
    float: left;
}
.bot a.fir{
    background: url(‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505302716776&di=0a84a2add6f798c1b0650417faba5fec&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201510%2F12%2F20151012234932_sSKua.thumb.224_0.jpeg‘) no-repeat;
    background-size: cover;
}
.bot a.sec{
        background: url(‘http://tse3.mm.bing.net/th?id=OIP.V5shhXuJeF4z6DOtqUkFgwD6D6&pid=15.1‘) no-repeat;
        background-size: cover;
}
.bot input{
    height: 30px;
    float: left;
    outline: none;
}
.bot input:nth-of-type(1){
    width: 150px;
    background: transparent;
    border:0 ;
    border-bottom: 1px solid #000000;
    margin: 0 5px;
}
.bot input:nth-of-type(2){
    width: 40px;
}
.cont div{
    padding: 10px 0;
    width: 100%;
}
.cont div span{
    display: inline-block;
    width: 40px;
    height: 40px;
}
.cont div p{
    max-width:150px;
    border: 1px solid #ccc;
    font-size: 14px;
    line-height: 20px;
    padding: 5px 10px;
    border-radius: 10px;
    position: relative;
}
.cont div:after{
    display: block;
    content: " ";
    clear: both;
}
.cont div p:before{
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border: 1px solid #ccc;
    position: absolute;
    top: 10px;
    transform: rotate(45deg);
}
.lis_lf span{
    background: url(‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505302716776&di=0a84a2add6f798c1b0650417faba5fec&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201510%2F12%2F20151012234932_sSKua.thumb.224_0.jpeg‘) no-repeat;
    background-size: cover;
    float: left;
    margin: 0 15px 0 5px;
}
.lis_lf p{
    float: left;
    background: #fff;
}
.cont .lis_lf p:before{
    background: #fff;
    left: -5px;
    border-top: 0;
    border-right: 0;
}
            
.lis_rt span{
    background: url(‘http://tse3.mm.bing.net/th?id=OIP.V5shhXuJeF4z6DOtqUkFgwD6D6&pid=15.1‘) no-repeat;
    background-size: cover;
    float: right;
    margin: 0 5px 0 15px;
}
.lis_rt p{
    float: right;
    background: lightgreen;
}
.cont .lis_rt p:before{
    background: lightgreen;
    right: -5px;
    border-left: 0;
    border-bottom: 0;
}    

JS部分

var oAs=document.getElementsByTagName("a")[0];
var oTxt=document.getElementById("txt");
var oTake=document.getElementById("take");
var cont=document.getElementById("cont");
//点击切换头像
oAs.onOff=true;
oAs.onclick=function(){
    if(this.onOff){
        this.className="sec";
        this.onOff=false;
    }else{
        this.className="fir";
        this.onOff=true;
    }
}
            
//点击发送
oTake.onclick=function(){
    if(oTxt.value.length !=0){
        if(oAs.onOff){
            cont.innerHTML+= "<div class=‘lis_lf‘><span class=‘peo‘></span><p class=‘lis_txt‘>"+oTxt.value+"</p></div>";
        }else{
              cont.innerHTML+= "<div class=‘lis_rt‘><span class=‘peo‘></span><p class=‘lis_txt‘>"+oTxt.value+"</p></div>";
        }
        oTxt.value=" ";
    }else{
　　　　return false;
　　}

        //使滚动条一直保持在底端，来显示最新发布的消息
    //必学写在最后，不然获取的scrollHeight不是最新的
    cont.scrollTop = cont.scrollHeight;
}