html聊天界面

先看效果图

参考网址：https://desk.v5kf.com/desk/kehu_zh.html

html代码

html lang="zh">

    "utf-8">
    "X-UA-Compatible" content="IE=edge">
    name="format-detection" content="telephone=no">
    "X-UA-Compatible" content="IE=edge,chrome=1">
    name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    name="mobile-web-app-capable" content="yes">
    name="apple-mobile-web-app-capable" content="yes">
    "yes" name="apple-mobile-web-app-capable">
    "yes" name="apple-touch-fullscreen">
    name="full-screen" content="yes">
    "default" name="apple-mobile-web-app-status-bar-style">
    name="screen-orientation" content="portrait">
    name="browsermode" content="application">
    name="msapplication-tap-highlight" content="no">
    name="x5-orientation" content="portrait">
    name="x5-fullscreen" content="true">
    name="x5-page-mode" content="app">
    "_blank">
    
    "~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    "stylesheet" href="~/Content/chat.css">
    <script src="~/Scripts/jquery-1.10.2.min.js">script>
    <script src="~/Scripts/chat.js">script>

"zh">
    "width:100%;height:100%" src="~/Images/chatBack.jpg">
    <div class="abs cover contaniner">
        <div class="abs cover pnl">
            <div class="top pnl-head">div>
            <div class="abs cover pnl-body" id="pnlBody">
                <div class="abs cover pnl-left">
                    <div class="abs cover pnl-msgs scroll" id="show">
                        <div class="msg min time" id="histStart">加载历史消息div>
                        <div class="pnl-list" id="hists">
                            -- 历史消息 -->
                        div>
                        <div class="pnl-list" id="msgs">
                            <div class="msg robot">
                                <div class="msg-left" worker="小龙">
                                    <div class="msg-host photo" style="background-image: url(../Images/head.png)">div>
                                    <div class="msg-ball" title="今天 17:52:06">你好，我是只能打字的聊天机器人                

您是想要了解哪些方面呢？div>
                                div>
                            div>
                            <div class="msg guest">
                                <div class="msg-right">
                                    <div class="msg-host headDefault">div>
                                    <div class="msg-ball" title="今天 17:52:06">你好div>
                                div>
                            div>
                        div>
                        <div class="pnl-list hide" id="unreadLine">
                            <div class="msg min time unread">未读消息div>
                        div>
                    div>
                    <div class="abs bottom pnl-text">
                        <div class="abs top pnl-warn" id="pnlWarn">
                            <div class="fl btns rel pnl-warn-free">
                                "../Images/icon/Smile.png" class="kh warn-btn" title="表情" id="emojiBtn" />
                                "../Images/icon/pic.png" class="kh warn-btn" title="截屏" id="emojiBtn" />
                                "../Images/icon/camera.png" class="kh warn-btn" title="图片" id="emojiBtn" />
                                "../Images/icon/edit.png" class="kh warn-btn" title="保存" id="emojiBtn" />
                            div>
                        div>
                        <div class="abs cover pnl-input">
                            class</span>=<span class="hljs-string">"scroll"</span> <span class="hljs-property">id</span>=<span class="hljs-string">"text"</span> wrap=<span class="hljs-string">"hard"</span> placeholder=<span class="hljs-string">"在此输入文字信息..."</span>>
                            <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                                
class="atcom" id="atcom">
                            div>
                        div>
                        <div class="abs br pnl-btn" id="submit" style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);" οnclick="SendMsg()">发送div>
                        <div class="pnl-support" id="copyright">"#">版权什么的div>
                    div>
                div>
                <div class="abs right pnl-right">
                    <div class="slider-container hide">div>
                    <div class="pnl-right-content">
                        <div class="pnl-tabs">
                            <div class="tab-btn active" id="hot-tab">常见问题div>
                            <div class="tab-btn" id="rel-tab">相关问题div>
                        div>
                        <div class="pnl-hot">
                            
class="rel-list unselect" id="hots">
                                -- 
这是一个问题，这是一个问题？
 -->
                            
                        div>
                        <div class="pnl-rel" style="display: none;">
                            
class="rel-list unselect" id="rels">
                                -- 
这是一个问题，这是一个问题？
 -->
                            
                        div>
                    div>
                div>
            div>
        div>
    div>

JS文件

// 发送信息
function SendMsg()
{
    var text = document.getElementById("text");
    if (text.value == "" || text.value == null)
    {
        alert("发送信息为空，请输入！")
    }
    else
    {
        AddMsg('default', SendMsgDispose(text.value));
        text.value = "";
    }
}
// 发送的信息处理
function SendMsgDispose(detail)
{
    detail = detail.replace("\n", "
").replace(" ", " ")
    return detail;
}

// 增加信息
function AddMsg(user,content)
{
    var str = CreadMsg(user, content);
    var msgs = document.getElementById("msgs");
    msgs.innerHTML = msgs.innerHTML + str;
}

// 生成内容
function CreadMsg(user, content)
{
    var str = "";
    if(user == 'default')
    {
        str = "
" + content +"
"
    }
    else
    {
        str = "
 + user + "\">
" + content + "
";
    }
    return str;
}

CSS文件代码太多，下载地址：https://pan.baidu.com/s/1SEEhsI27aN711xnQxC5KtQ

代码会继续更新，功能会继续完善，尽请期待！