JS实现聊天界面

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<style>

    .container{
       
        width: 700px;
        height:710px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 10%;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    }
    /* 标题 */
    .title{
        background-color: rgb(0, 255, 166);
        height: 42px;
        border-left: 7px solid green;
        font-size: 25px;
        font-weight: bold;
        line-height: 42px;
        padding-left: 10px;

    }
    /* 消息框 */
    .msgshow{
        height: 450px;
        border-bottom: 1px solid rgb(136, 133, 133);
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    /* 输入框 */
    .input-box{
        height: 150px;
        padding: 20px;
        box-sizing: border-box;
      


    }
    
    .btns{
        background-image: linear-gradient(to right,rgb(150, 239, 106),rgb(64, 243, 174),rgb(173, 236, 173));
       
        height: 65px;
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        align-items: center;
    }
    
    button{
        border: none;
        background-color: rgb(25, 225, 65);
        width: 70px;
        height: 30px;
        border-radius: 6px;
    }
    .miao{
        border-radius: 5px;
        background-color: rgb(97, 230, 80);
        padding: 8px;
        align-self: flex-start;
        
    }
    .qiqi{
        border-radius: 5px;
        background-color: rgb(80, 220, 230);
        padding: 8px;
        align-self: flex-end;

    }



</style>

自言自语

</div>
   <div class="input-box" contenteditable></div>
   <div class="btns">
        <button onclick="sendMsg('miao')">喵喵</button>
        <button onclick="sendMsg('qiqi')">七七</button>
   </div>
<div> 

    <script>
    function sendMsg(className){
        //获取输入框的消息
        var msg = $('.input-box').text();
        //拼接消息DOM结构
        var msg_dom = $('<p class="'+className+'">'+msg+'</p>')
        //把消息放入消息框中
        $('.msgshow').append(msg_dom)
        var msg = $('.input-box').text('');
    }
   
    </script>