JS+HTML+CSS模仿微信界面发送信息

功能：

1、点击头像可以模拟切换用户。

2、输入信息，点击发送可以显示在屏幕上。

3、新信息在上方，旧信息在下方，方便有滚动条的时候能直接看到新信息，而不是拖拉滚动条看下面的新内容。

HTML

<div id="iphone">
    <div id="wrap">
        <div id="div" class="clearfix">
            <ul id="ul" class="clearfix"></ul>
        </div>
        <div id="box" class="clearfix">
            <p id="imgWrap"><img id="img" src="images/1.jpg"></p>
            <input id="inp" type="text">
            <button id="btn">发送</button>
        </div>
    </div>
</div>

CSS

*{
        box-sizing: border-box;
    }
    p,ul,li{
        margin:0;
        padding:0;
    }
    .clearfix::after{
        content: "";
        display: block;
        clear: both;
    }
    #iphone{
        width: 351px;
        height: 692px;
        background: url(images/iphone6.png) no-repeat;
        margin: 0 auto;
        padding:80px 0 95px;
    }
    #wrap{
        width: 313px;
        height: 520px;
        margin:0px auto;
        left:19px;
        top:80px;
        background: linear-gradient(transparent,rgba(0,0,0,.2)),url(images/timg.jpg) no-repeat 50%;
    }
    #div{
        width:100%;
        height:470px;
        margin:0 auto;
        padding:10px;
        overflow: auto;
    }
    #box{
        float: left;
    }
    #btn{
        background:#6abe83;
        border:none;
        width:44px;
        height:34px;
        margin:10px 5px 0 0;
        border-radius: 6px;
        outline: none;
    }
    #inp{
        width:200px;
        height:36px;
        margin:10px 5px 0 0;
        border-radius: 6px;
        border:none;
        outline: none;
        padding:10px;
    }
    #imgWrap{
        float:left;
        margin:10px 5px 0 10px;
    }
    #img{
        width:36px;
        height:36px;
        border-radius: 6px;
    }
    .fr{
        float:right;
    }
    #ul li{
        width:100%;
        list-style: none;
        margin-bottom: 10px;
    }
    .right{
        float:right;
    }
    .left{
        float:left;
    }
    #ul li.left img,#ul li.left div{
        float:left;
    }
    #ul li.right img,#ul li.right div{
        float:right;
    }
    #ul li.right div{
        margin-left: 10px;
    }
    #ul li.right div,#ul li.left div{
        height:36px;
        line-height: 36px;  
    }
    #ul li.left div{
        margin-right: 10px;
    }
    .inps,.inpss{
        background:#6abe83;
        height:20px;
        padding:0 10px;
        border-radius: 8px;
        position: relative;

    }
    .inps::after,.inpss::after{
        content:"";
        position:absolute;
        border-top:6px solid transparent;
        border-bottom:6px solid transparent;
        top:9px;
        
    }
    .inps::after{
        border-right:6px solid #6abe83;
        left:-6px;
    }
    .inpss::after{
        border-left:6px solid #6abe83;
        right:-6px;
    }
    </style>

JS

<script>
    var div=document.getElementById("div"),
        img=document.getElementById("img"),
        inp=document.getElementById("inp"),
        btn=document.getElementById("btn"),
        ul=document.getElementById("ul"),
        imgWrap=document.getElementById("imgWrap");
    var onOff=true;

        img.onclick=function(){
            if(onOff){
                img.src="images/2.jpeg";
                onOff=false;
            }
            else{
                img.src="images/1.jpg";
                onOff=true;
            }
        }
        btn.onclick=function(){
            if(onOff){
                // ul.innerHTML+="<li class=left><div>"+imgWrap.innerHTML+"</div><div>"+inp.value+"</div><br></li>";聊天记录从上往下走
                ul.innerHTML="<li class=left><div>"+imgWrap.innerHTML+"</div><div class=inps>"+inp.value+"</div><br></li>"+ul.innerHTML;//聊天记录从下往上走 后面的放在上面
                inp.value="";
            }
            else{
                ul.innerHTML="<li class=right><div>"+imgWrap.innerHTML+"</div><div class=inpss>"+inp.value+"</div><br></li>"+ul.innerHTML;
                inp.value="";
            }
        }
        
    </script>