原生js实现发短信~chat

首先给大家说一声抱歉，小编最近和女朋友闹矛盾，断更了一周呀
唉，实在是罪过呀，不远两千多公里从北京跑到广州，哄女朋友开心，我也没谁了
宝宝心里苦，宝宝就是不说。
好了，言归正传，咱们回到就是实现发短信的功能，其实这个很好实现的主要的是创建元素（document.createElement），然后给元素添加子节点（appendChild）
结合这两点。
首先给出效果图，嘿嘿嘿嘿~~~

1111111111111111111111.png

对话有点儿邪恶，大家当做段子听听就可以了

咳咳咳，我们还是想先把门户（html + css）写好

<style>
    *{
        box-sizing: border-box;
    }
    body,html{
        height: 100%;  overflow: hidden;
    }
    ul{ 
       padding: 0;  margin: 10px 0;  list-style: none;
    }
    .main{
        width: 650px;
    }
    .main>*{
        float: left;
    }
    .user{
        padding-right: 50px;
    }
    .user section{
        border: 1px solid #ccc;background-color: #eee; border-radius:       5px;margin-bottom: 50px;padding: 30px;
    }
    .user input[type=text]{
        width: 100%;
    }
    #send1{
        background-color: dodgerblue;
    }
    #send2{
        background-color: forestgreen;
    }    .box{
        border:1px solid #ccc; background-color: #eee;  width: 300px; height: 500px; overflow-y: auto;
    }
    .box li{
        padding: 10px;  position: relative;  min-height: 60px;
    }
    .box li:before{
        content: '';  width: 40px; height: 40px; position: absolute;  top:10px;    }
    .box .left{
        padding-left: 60px;    }
    .box .left:before{
        left:10px;background: url(img/u1.jpg); background-size: cover;    }    .box .right{
        padding-right: 60px; text-align: right;    }
   .box .right:before{
        right:10px; background: url(img/u2.jpg); background-size: cover;    }    .box span{
        word-break: break-all;  border-radius: 5px ;        background: #fff;  line-height: 30px; display: inline-block;        padding: 5px;  font-size: 14px;    }
    .box .right span{        background: lime;    }
</style>
<div class="main">
    <div class="user">
        <section>
            <input type="text" id="user1-mess">
            <input type="button" id="send1" value="发送">
        </section>
        <section>
            <input type="text" id="user2-mess">
            <input type="button" id="send2" value="发送">
        </section>
    </div>
    <div class="box">
        <ul id="mess-list"></ul>
    </div>
</div>

这段代码大家使用的时候注意一下，style和div添加相应的样式和body里边儿。
下面就来说说js实现部分了，我们采用的是原生js，纯手工打造，价值可是很高的哦

   <script>
//        获取id的函数封装
        function $(id) {
            return document.getElementById(id);
        }
        var messFir = $('user1-mess');
        var messSec = $('user2-mess');
        var list = $('mess-list');
//        第一个按钮的点击事件
        $('send1').onclick = function () { 
           createMess(messFir.value,'left');
            messFir.value = '';
        };
//        第二个按钮的点击事件
        $('send2').onclick = function () {
            createMess(messSec.value,'right');
            messSec.value = ''; 
       };
//        接收到信息后创建一个li标签
        function createMess(text,style) {
            var li = document.createElement('li');
            li.className = style;
            var span = document.createElement('span');
            span.innerText = text;
//            将span添加到li标签下边儿
            li.appendChild(span);
//            将li标签添加到ul下边儿
            list.appendChild(li);
        }
    </script>

我相信看了我的源码之后，你可以很好的理解其中的实现原理，个人感觉原生js除了代码量大外，用着还是很灵活的，可以尝试尝试封装自己想要用的方法。

有错误的地方欢迎大家，指正错误，谢谢大家~@^_^@~

dog.jpg