js实现简单版聊天室【2021.10.8】_js 实现在线聊天室-CSDN博客

本文链接：https://blog.csdn.net/masierty/article/details/120652883

一、思路

获取标签
绑定点击事件：onclick
先检查是否消息为空，为空显示提示，不为空发送消息
获取text（文本框）的value（消息）
将消息写入展示盒子的HTML里面

二、成品展示

三、代码部分

<!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 type="text/css">
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

/* 居中对齐 */
    html,body{
        height: 100%;
    }
    body{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

/* 设置外观 */
    .contentBox{
        width: 40%;
        min-width: 500px;
        height: 65%;
        min-height: 400px;
        background-color: rgb(236, 234, 234);
        border: 1px solid black;
        display: flex;
        flex-direction: column;
        align-items:center;
    }
    #showBox{
        overflow: auto;
        width: 95%;
        height: 80%;
        border: 1px solid black;
        margin: 2.5%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    #aInput,#bInput{
        margin-bottom: 5px;
    }
    #buttonBox{
        font-size: 16px;
    }
    input[type=text]{
        height: 36px;
        width: 200px;
    }
    input[type=button]{
        height: 36px;
        width: 100px;
    }

/* 设置消息的样式 */
#showBox p{
    display:inline-block;
    background:#1781be;
    border-radius:10px;
    color:#fff;
    padding:5px 10px;
    margin: 5px 10px;
}
#showBox span p{
    display:inline-block;
    background:#d38c20;
    border-radius:10px;
    color:#fff;
    margin: 5px 10px;
}

/* 改变B发送的消息的对齐方式 */
#showBox span{
    align-self: flex-end;   
}

    </style>
</head>
<body>
    <div class="contentBox">
        <div id="showBox">

        </div>
        <div id="buttonBox">
            <div id="aInput">
                A说：<input type="text" id="aTalkWord">
                <input type="button" id="aButton" value="发送">
            </div>
            <div id="bInput">
                B说：<input type="text" id="bTalkWord">
                <input type="button" id="bButton" value="发送">
            </div>
        </div>
    </div>
</body>
<script>
    
//获取标签
let ShowBox=document.getElementById("showBox");//getElementsByClassName("")[0];
let ATalkWord=document.getElementById("aTalkWord");
let BTalkWord=document.getElementById("bTalkWord");
let Abutton=document.getElementById("aButton");
let Bbutton=document.getElementById("bButton");

//绑定事件
Abutton.onclick=function(){
    let Atalk = "";//定义空值
    if(ATalkWord.value==""){   //判断消息是否为空
        alert("宝！消息不能为空");
    }else{
        Atalk="<p> A说: "+ ATalkWord.value +"</P>";//获取信息
    }
    ShowBox.innerHTML=ShowBox.innerHTML+Atalk;//添加信息
}
Bbutton.onclick=function(){
    if(BTalkWord.value==""){
        alert("宝！消息不能为空");
    }else{
        ShowBox.innerHTML=ShowBox.innerHTML+"<span><p> B说: "+ BTalkWord.value +"</P></span>";//第二种方法：直接写入HTML里面
    }
}
</script>
</html>