简易聊天框

最新推荐文章于 2022-08-01 09:33:23 发布

H_e_a_l_e_r

最新推荐文章于 2022-08-01 09:33:23 发布

阅读量116

点赞数 1

分类专栏： JS语言文章标签： jquery css html5

本文链接：https://blog.csdn.net/H_e_a_l_e_r/article/details/121640816

版权

JS语言专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这是一个简单的HTML聊天应用示例，使用jQuery库实现。当用户点击发送按钮时，会生成一个随机用户名和头像，并显示在聊天窗口中。页面还包括一个关闭按钮，点击后隐藏聊天窗口。CSS样式为聊天界面提供了基本布局和样式。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易聊天框</title>
    <script src="../JS/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="../CSS/chat.css">
</head>
<body>
    <section id="chat">
        <div class="chatBody"></div>
        <div>
            <img src="../img/icon.jpg" alt="">
        </div>
        <textarea class="chatText"></textarea>
        <div class="btn">
            <span id="close">关闭(C)</span>
            <span id="send">发送(S)</span>
        </div>
    </section>
</body>
<script>
    $(document).ready(function () {
        //用户名
        var uName = new Array("翠花","熊大","熊二");
        //头像地址
        var headImg = new Array("head01.jpg","head02.jpg","head03.jpg");
        $("#send").click(function () {//点击发送按钮
            //判断当前输入框中是否有内容
            if ($(".chatText").val().length>0){
                //获取聊天框
                var str = $(".chatBody").html();
                //获取随机数(0～2)
                var iNum = Math.floor(Math.random()*3);
                //根据随机数获取名字
                //创建节点
                var userName = "<p>"+uName[iNum]+"</p>";
                //根据随机数获取头像
                //创建内容
                var head = "<div><img src=../img/"+headImg[iNum]+"></div>";
                //获取输入内容
               var chatStr = "<div>"+$(".chatText").val()+"</div>";
               //将头像、名字和内容拼接到一起(输入框的值)
               var current = "<section>"+head+userName+chatStr+"</section>";
               //将输入框和聊天框拼接到一起 然后一起赋给聊天框
                $(".chatBody").html(str+current);
                //聊天框内容添加背景
                $(".chatBody section div:last").addClass("chatContent");
                //清空文本域内容
                $(".chatText").val("");
            }
        });
        /*关闭*/
        $("#close").click(function () {
            $("#chat").hide();
        })
    })
</script>
</html>


CSS内容
*{
    margin: 0;
    padding: 0;
    line-height: 22px;
    font-family: "Arial", "微软雅黑";
}
#chat{
    margin: 3px auto 0 auto;
    width:436px;
    border: 2px #999999 solid;
}
.chatBody{
    width: 100%;
    height: 220px;
    overflow:auto;
}
.chatText{
    border: none;
    width: 100%;
    height: 50px;
}
.btn{
    text-align: right;
}
.btn span{
    display: inline-block;
    padding: 0 10px;
    height: 25px;
    overflow: hidden;
    color: #ffffff;
    border-radius: 5px;
    background-color: #069dd5;
    font-size: 12px;
    margin-right: 3px;
    cursor:pointer;
}
.chatBody div:first-of-type{
    float: left;
    width: 38px;
}
.chatBody p{
    float: left;
    font-size: 12px;
    width:370px;
    color: #0000ff;
}
.chatBody div:last-of-type{
    float: left;
    width: 370px;
    font-size: 12px;
}
.chatBody section{
    clear: both;
}
.chatContent{
    background:#efefef;
    border-radius: 5px;
    padding: 3px;
}