初学js之qq聊天实例

实现的功能为上图所示，但是每新发送的消息必须显示在最上面。

我实现了两版，样式有是一样的。我们直接看代码。

版本一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
        }
        .box{
            width: 253px;
            height: 535px;
            background: url('img/iPhone.png')no-repeat;
            margin: 0 auto;
            position: relative;
        }
        .content{
            position: absolute;
            width: 216px;
            height: 340px;
            top:78px;
            left: 21px;
            overflow: auto;
        }
        .send{
            position: absolute;
            width: 216px;
            height: 42px;
            bottom:74px;
            left: 21px;
            background-color: #EEEEEE;
            border-top: 1px solid #ccc;
        }
        .send a{
            position: absolute;
            top: 3px;
            left: 5px;
            text-decoration: none;
            text-align: center;
            line-height: 32px;
            width: 30px;
            height: 32px;
            border-radius: 5px;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        .db{
            background: url('img/qq2.gif')no-repeat center;
        }
        .xl{
            background: url('img/qq1.gif')no-repeat center;

        }
        .send .inp1{
            position: absolute;
            top: 3px;
            left: 41px;
            width: 126px;
            height: 32px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        .send span{
            position: absolute;
            top: 50%;
            right:0px;
            width: 40px;
            height: 32px;
            color: #999;
            margin-top: -16px;
            font: 600 16px/32px "微软雅黑";
            cursor: pointer;
        }
        .cont{
             padding: 10px 0;
             width: 100%;
        }
        .content div{
            display: block;
            clear: both;
        }
        .content .lis_lf{
            background: url('img/qq2.gif')no-repeat;
            float: left;
            margin: 5px 5px 0 5px;
        }
        .content .lis_rt{
            background: url('img/qq1.gif')no-repeat right;
            float: right;
            margin:5px 5px 0 5px;
        }
        .content .lis_lf span{
            display: inline-block;
            margin-left: 30px;
            word-break:break-all; width:100px;
            word-wrap:break-word;
            background-color: #e7e5eb;
            border-radius: 5px;
        }
        .content .lis_rt span{
            display: inline-block;
            margin-right: 30px;
            word-break:break-all; width:100px; overflow:auto;
            word-wrap:break-word;
            background-color: #2bc71c;
            border-radius: 5px;
        }
    </style>
    <script>
        window.onload = function(){
            var oContent =document.getElementById("content");
            var oL1 = oContent.getElementsByTagName("ol")[0];
            var oSend = document.getElementsByTagName("span")[0];
            var oInp1 = document.getElementById("inp1");
            var oA = document.getElementsByTagName("a")[0];
            var onOff = true;

            oA.onclick = function(){
                if(this.onOff){
                    oA.className = 'db';
                    this.onOff = false;
                }else{
                    oA.className = 'xl';
                    this.onOff = true;
                }
            };

            //发送消息
            oSend.onclick = function(){
                if(oInp1.value == "")
                {
                    alert("消息不能为空");
                }
                else
                    {
                    if(oA.onOff)
                    {
                        var Test = "<li class ='lis_rt'>" + "<span>"+oInp1.value+"</span>" + "</li>";
                        // oL1.innerHTML += Test;  //等价于 oL1.innerHTML = oL1.innerHTML + Test
                        oL1.innerHTML = Test + oL1.innerHTML;
                    }
                    else
                    {
                        var Test = "<li class ='lis_lf'>" + "<span>" + oInp1.value + "</span>" + "</li>";
                        oL1.innerHTML = Test + oL1.innerHTML;
                    }
                    oInp1.value = "";
                }
            };
        }

    </script>
</head>
<body>
    <div class="box">
        <div class="content" id="content">
            <ol class="cont reverse"></ol>
        </div>
        <div class="send">
            <a href="javascript:;" class="db"></a>
            <input class="inp1" type="text" value="" id="inp1">
            <span>发送</span>
        </div>
    </div>
</body>
</html>

版本二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
        }
        .box{
            width: 253px;
            height: 535px;
            background: url('img/iPhone.png')no-repeat;
            margin: 0 auto;
            position: relative;
        }
        .content{
            position: absolute;
            width: 216px;
            height: 340px;
            top:78px;
            left: 21px;
            overflow: auto;
        }
        .send{
            position: absolute;
            width: 216px;
            height: 42px;
            bottom:74px;
            left: 21px;
            background-color: #EEEEEE;
            border-top: 1px solid #ccc;
        }
        .send a{
            position: absolute;
            top: 3px;
            left: 5px;
            text-decoration: none;
            text-align: center;
            line-height: 32px;
            width: 30px;
            height: 32px;
            border-radius: 5px;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        .db{
            background: url('img/qq2.gif')no-repeat center;
        }
        .xl{
            background: url('img/qq1.gif')no-repeat center;

        }
        .send .inp1{
            position: absolute;
            top: 3px;
            left: 41px;
            width: 126px;
            height: 32px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        .send span{
            position: absolute;
            top: 50%;
            right:0px;
            width: 40px;
            height: 32px;
            color: #999;
            margin-top: -16px;
            font: 600 16px/32px "微软雅黑";
            cursor: pointer;
        }
        .cont{
             padding: 10px 0;
             width: 100%;
        }
        .content div{
            display: block;
            clear: both;
        }
        .content .lis_lf{
            background: url('img/qq2.gif')no-repeat;
            float: left;
            margin: 5px 5px 0 5px;
        }
        .content .lis_rt{
            background: url('img/qq1.gif')no-repeat right;
            float: right;
            margin:5px 5px 0 5px;
        }
        .content .lis_lf span{
            display: inline-block;
            margin-left: 30px;
            word-break:break-all; width:100px;
            word-wrap:break-word;
            background-color: #e7e5eb;
            border-radius: 5px;
        }
        .content .lis_rt span{
            display: inline-block;
            margin-right: 30px;
            word-break:break-all; width:100px; overflow:auto;
            word-wrap:break-word;
            background-color: #2bc71c;
            border-radius: 5px;
        }
    </style>
    <script>
        window.onload = function(){
            var oContent =document.getElementById("content");
            var oL1 = oContent.getElementsByTagName("ol")[0];
            var oSend = document.getElementsByTagName("span")[0];
            var oInp1 = document.getElementById("inp1");
            var oA = document.getElementsByTagName("a")[0];
            var onOff = true;
            // var num = 0;
            oA.onclick = function(){
                if(this.onOff){
                    oA.className = 'db';
                    this.onOff = false;
                }else{
                    oA.className = 'xl';
                    this.onOff = true;
                }
            };
            function fun(){
                //1.创建li
                var newItem = document.createElement("li");
                //2.在li里面创建span
                var newSpan = document.createElement("span");
                newItem.appendChild(newSpan);
                newSpan.innerHTML = oInp1.value;
                if (oInp1.value == ""){
                    alert("消息不能为空");
                }
                if(oA.onOff){
                    newItem.className = 'lis_rt';
                }else{
                    newItem.className = 'lis_lf';
                }
                oInp1.value = "";
                var list = document.getElementById("cont")
                list.insertBefore(newItem, list.childNodes[0]);
                //insertBefore 给某个元素前添加节点
            };
            oSend.onclick = function(){
                fun();
            }
        }

    </script>
</head>
<body>
    <div class="box">
        <div class="content" id="content">
            <ol class="cont" id="cont">
            </ol>
        </div>
        <div class="send">
            <a href="javascript:;" class="db"></a>
            <input class="inp1" type="text" value="" id="inp1">
            <span>发送</span>
        </div>
    </div>
</body>
</html>