js实现发送聊天信息并显示至页面

最新推荐文章于 2022-08-03 21:51:19 发布

AC它真的很香

最新推荐文章于 2022-08-03 21:51:19 发布

阅读量1.3k

点赞数 1

文章标签： html5 css html

本文链接：https://blog.csdn.net/Erin_jwx/article/details/120066782

版权

在这里插入图片描述
不是移动端！！不是移动端！！
只是背景放的是一个手机。（素材放到最下面了）
最近被这个卡了好久，昨天刚有了idea就写了个demo测试了一下，其实就是一个动态添加元素
给同样遇到问题的朋友一点启发。
（存在一点小bug，还没有实现气泡自适应和自动定位到新消息）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clearFloat:after{
            content: '';
            height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
        .clearFloat{
            zoom: 1;
        }
        .phone{
            background-image: url(img/phone.png);
            height: 460px;
            background-repeat: no-repeat;
            background-color: #f6f6f6;
            border: 1px solid transparent;
        }
        .screen{
            /* border: 1px solid red; */
            text-align: center;
            height: 340px;
            margin-top: 56px;
            position: relative;
        }
        .chat{
            /* border: 1px solid blue; */
            width: 194px;
            position: absolute;
            left: 18px;
            top: -10px;
            height: 340px;
        }
        .title{
            /* border: 1px solid red; */
            background-color: #ededed;
            font-weight: bold;
            margin-left: 2px;
            margin-top: 2px;
        }
        .content{
            /* border: 2px solid orange; */
            height: 290px;
            overflow-y: auto;
        }
        .bottom{
            width: 194px;
            position: absolute;
            bottom: 0;
            
        }
        .bottom input,.bottom button{
            float: left;
        }
        .bottom input{
            width: 138px;
            margin-right: 2px;
            margin-left: 2px;
            height: 17px;
            outline: none;
        }
        .bottom button{
            background-color: #3CB371;
            color: #fff;
            border-radius: 5px;
            border: 1px solid #3CB371;
            cursor: pointer;
        }
        .message{
            border: 1px solid transparent;
            height: 25px;
            line-height: 25px;
            margin-top: 6px;
        }
        .message img{
            width: 26px;
        }
        .myInfo{
            margin-right: 5px;
        }
        .myInfo p{
            float: right;
        }
        .myInfo p:last-child{
            border-radius: 5px;
            background-color: #87CEFA;
            margin-right: 0px;
            display: block;
            padding: 0 5px;
        }
        .rightTriangle{
            width: 0px;
            height: 0px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent #87CEFA;
            position: relative;
            top: 6px;
        }
        .leftTriangle{
            width: 0px;
            height: 0px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent gold transparent transparent;
            position: relative;
            top: 6px;
        }
        .robotInfo{
            margin-left: 5px;
        }
        .robotInfo p{
            float: left;
        }
        .robotInfo p:last-child{
            border-radius: 5px;
            background-color: gold;
            margin-right: 0px;
            display: block;
            padding: 0 5px;
        }
    </style>
</head>
<body>
    <div class="phone">
        <div class="screen">
            <div class="chat">
                <div class="title">复读机器人</div>
                <div class="content">
                    <!-- <div class="message">
                        <div class="myInfo clearFloat">
                            <p><img src="img/avatar.jpg" alt=""></p>
                            <p class="rightTriangle"></p>
                            <p>你好</p>
                        </div>
                    </div>
                    <div class="message">
                        <div class="robotInfo clearFloat">
                            <p><img src="img/robot.jpg" alt=""></p>
                            <p class="leftTriangle"></p>
                            <p>你好</p>
                        </div>
                    </div> -->
                    
                </div>
                
                <div class="bottom clearFloat">
                    <input type="text">
                    <button>&nbsp;&nbsp;发送&nbsp;&nbsp;</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var input = document.querySelector('input');
        var button = document.querySelector('button');
        var content = document.getElementsByClassName('content')[0];
        button.onclick = function(){
            // 点击按钮将input输入框的内容发送给机器人
            var value = input.value;
            if(value=='') return
            input.value = ''
            var myMessage = document.createElement('div');
            myMessage.className = 'message';
            myMessage.innerHTML = `
            <div class="myInfo clearFloat">
                <!-- 我发送的消息 -->
                <p><img src="img/avatar.jpg" alt=""></p>
                <p class="rightTriangle"></p>
                <p>${value}</p>
                </div>
            `
            // console.log(myMessage);
            content.appendChild(myMessage);
            
            var robotMessage = document.createElement('div');
            robotMessage.className = 'message'
            robotMessage.innerHTML = `
                <div class="robotInfo clearFloat">
                    <!-- 机器人发送的消息 -->
                    <p><img src="img/robot.jpg" alt=""></p>
                    <p class="leftTriangle"></p>
                    <p>${value}</p>
                </div>
            `
            content.appendChild(robotMessage)
        }
    </script>
</body>
</html>