原生js實現發簡訊~chat

eternalshallow發表於2017-12-14
JS

首先給大家說一聲抱歉，小編最近和女朋友鬧矛盾，斷更了一週呀 唉，實在是罪過呀，不遠兩千多公里從北京跑到廣州，哄女朋友開心，我也沒誰了 寶寶心裡苦，寶寶就是不說。 好了，言歸正傳，我們們回到就是實現發簡訊的功能，其實這個很好實現的主要的是建立元素（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

相關文章