Web模拟聊天框发送消息

最新推荐文章于 2025-02-20 19:18:32 发布

沙小克

最新推荐文章于 2025-02-20 19:18:32 发布

阅读量454

点赞数 1

文章标签：前端 css css3

本文链接：https://blog.youkuaiyun.com/PQpingLee/article/details/127676804

版权

<!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>聊天界面</title>
    <style>
        /*聊天框*/
        .div1{
            width: 400px;
            /* background-color: aliceblue; */
            margin: auto;
            border-style:solid ;
            border-radius: 10px;
        }
        
        /*聊天框头部*/
        .headDiv{
            height: 50px;
            line-height: 50px;
            padding-left: 15px;
            font-size: 20px;
            font-weight: 600;
            font-style:normal;
            border-style: solid;
            border-left-width: 0;
            border-right-width: 0;
            border-top-width: 0;
        }

        /*聊天框中部*/
        .bodyDiv{
            height: 450px;
            /* background-color: yellow; */
            overflow: auto;/* 内容溢出时自动滚动 */
        }
        .bodyDiv1L{  /* 左边发送信息 */
            height: 140px;
            width: 100%;
            /* background-color:aqua; */
        }
        .bodyDiv1leftL{ /*第一部分左边*/
            height: 60px;
            width: 60px;
            background-color:blue;
            border-radius: 50%;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
            color: white;
            margin-left: 15px;
            margin-right: 10px;
            margin-top: 10px;
            float: left;
        }
        .bodyDiv1rightL{ /*第一部分右边*/
            width: 60%;
            height: 100px;
            /* background-color:green;          */
            float: left;
            margin-top: 10px;
        }
     
        .speak1DivL{ /*第一部分聊天*/
            background-color: gray;    
            padding: 5px;
            border-radius: 0 10px 10px 10px;
            text-align: left;
            line-height: 50px;
            margin-top: 5px;
        }

        .bodyDiv1R{  /*右边发送信息 */
            height: 140px;
            width: 100%;
            /* background-color:aqua; */
        }
        .bodyDiv1leftR{ /*第二部分左边*/
            height: 60px;
            width: 60px;
            background-color:blue;
            border-radius: 50%;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
            color: white;
            margin-left: 15px;
            margin-right: 10px;
            margin-top: 10px;
            float: right;
        }
        .bodyDiv1rightR{ /*第二部分右边*/
            width: 60%;
            height: 100px;
            /* background-color:green; */
            float: right;
            margin-top: 10px;
            text-align: right; /*时间居右*/
        }
      
        .speak1DivR{ /*第二部分聊天*/
            background-color: gray;
            padding: 5px;
            border-radius: 10px 0 10px 10px;
            text-align: left;
            line-height: 50px;
            margin-top: 5px;

        }

        /*聊天框底部*/
        .footDiv{
            height: 150px;
            width: 100%;
            /* background-color: red; */
            border-style: solid;
            border-left-width: 0;
            border-right-width: 0;
            border-bottom-width: 0;
            position: relative;  /*position属性 */
        }
        .text{
            width: 100%;
            height: 100%;
            outline: none;
            padding: 5px;
            box-sizing: border-box;
        }
        .sent{
            height: 40px;
            width: 100px;
            background-color: rgb(63, 63, 247);
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 20px;
            border-radius: 10px;
            color: white;
            text-align: center;
            line-height: 40px;
        }
        
    </style>
</head>
<body>
    <!--聊天框-->
    <div class="div1">
        <!--聊天框头部-->
        <div class="headDiv">穿越火线排位上分</div>

        <!--聊天框中部-->
        <div class="bodyDiv">
            <!--中部第一部分-->
            <div class="bodyDiv1L">
                <!--中部第一部分左边-->
                <div class="bodyDiv1leftL">奥摩</div>
                <!--中部第一部分右边-->
                <div class="bodyDiv1rightL">
                    <!--中部第一部分时间-->
                    <div class="time1DivL">12:17</div>
                    <!--中部第一部分聊天内容-->
                    <div class="speak1DivL">穿越火线在线的人好多呀</div>
                </div>
            </div>
            <!--中部第二部分-->
            <div class="bodyDiv1R">
                <!--中部第一部分左边-->
                <div class="bodyDiv1leftR">比伯</div>
                <!--中部第一部分右边-->
                <div class="bodyDiv1rightR">
                    <!--中部第一部分时间-->
                    <div class="time1DivR">12:17</div>
                    <!--中部第一部分聊天内容-->
                    <div class="speak1DivR">是啊，老玩家都回归了</div>
                </div>
            </div>  
             <!--中部第一部分-->
             <div class="bodyDiv1L">
                <!--中部第一部分左边-->
                <div class="bodyDiv1leftL">奥摩</div>
                <!--中部第一部分右边-->
                <div class="bodyDiv1rightL">
                    <!--中部第一部分时间-->
                    <div class="time1DivL">12:17</div>
                    <!--中部第一部分聊天内容-->
                    <div class="speak1DivL">愣着干啥，快上号</div>
                </div>
            </div>
        </div>

        <!--聊天框底部-->
        <div class="footDiv" >
            <textarea  class="text" placeholder="请输入" cols="30" rows="10"></textarea>
            <div class="sent" onclick="textSout()" >发送</div>
        </div>
    </div>

    <script>
        function textSout(){
            var text = document.querySelector(".text").value /* 获得多行输入框内容的值*/
           
            /*得到bodyDiv1R(Div标签的bodyDiv1R属性) 的字符串格式*/
            var bodyDiv1R = ` <div class="bodyDiv1R">      
                <div class="bodyDiv1leftR">比伯</div>               
                <div class="bodyDiv1rightR">                  
                    <div class="time1DivR">12:17</div>                    
                    <div class="speak1DivR">${text}</div>
                </div>  
            </div>   `
           
            /*拼接*/
            var bodyDiv  = document.querySelector(".bodyDiv") /*先得到属性为bodyDiv的标签*/
            bodyDiv.innerHTML = bodyDiv.innerHTML+bodyDiv1R /* bodyDiv.innerHTML表示属性为bodyDiv的标签的代码内容(以字符串返回)*/
            /* 又因为bodyDiv1R也是字符串 所以上面代码表示在原有的内容上进行拼接*/
           
            /*自动滚动到底部*/
            bodyDiv.scrollTop = bodyDiv.scrollHeight

            /*点击发送后清空输入框内容*/
            document.querySelector(".text").value= ""                    
        }
    </script>
</body>
</html>