客服在线聊天系统总结

摘要：JS实现一个在线客服聊天1.获取DOM元素//通过按钮标签名获取元素：ElementsByTagNamelet btn = document.getElementsByTagName('button')[0];//通过textarea文本域name名获取元素：getElementsByNamelet text = document.getElementsByName('te

JS实现一个在线客服聊天

1.获取DOM元素

//通过按钮标签名获取元素：ElementsByTagName

let btn = document.getElementsByTagName('button')[0];

//通过textarea文本域name名获取元素：getElementsByName

let text = document.getElementsByName('text')[0];

//通过按钮标签名获取元素：ElementsByTagName

let list = document.getElementsByTagName('ul')[0];

2.计数器，用来计算聊天次数

let sum = 0;

3.事件函数：

按钮事件：

//判断用户是否输入

if（输入框value值的length===0）{

alert（‘您未输入内容，请输入后在发送！’）

//输入框返回一个假值

return false；

//清空上次输入的内容userCommentf

声明一个userCommentf = text.value；

//创建一个新DOM元素节点 li标签

let li = document.createElement('li');

//把li标签的内容替换成userCommentf

li.innerHTNML = userCommentf;

//let userPic用户头像；

let userPic = '<img src="https://dwz.cn/CqtDdPv0" width="30" style="border-radius:50%">';

合并用户头像+用户输入的文字内容；

li.innerHTNML=userPic+‘ ’+userCommentf

//然后是list   ul标签更新li节点  appendChild（）更新节点  作用是插入新的对话在聊天窗口

list.appendChild('li');

//接着让聊天记录，有新的内容的时候自增1

sum+=1；

//setTimeout设置定时器 默认是2秒后自动回复内容

setTimeout（function）{

let info =[ '您好'，'人工服务'，'发货时间'，'热线电话'，'工作时间'，]；

}

//Math.floor取整不带小数点  Math.random取随机数()*3是0-3之间的整数

let temp  = info[Math.floor(Math.random()*3)];

let reply = document.createElement('li');

//  reply 创建一个新li节点

let reply = document.createElement('li');

//kefuPic 客服头像

let kefuPic = '<img src="https://dwz.cn/vpSlTnhx" width="30" style="border-radius:50%;">';

//reply 新的li节点插入页面上显示客服头像+temp  自动回复内容

reply.innerHTML = kefuPic + ' ' + '<span style="color:red">'+temp+'</span>';

//然后把上面的内容插入到ul里面，js就是list里面，

list.appendChild(reply);

// 最后sum完成后自增+1

sum += 1;

//定时器可以设置2秒的时间回复注意格式哦！

setTimeout(function(){};2000）

// 当聊天记录达到10条时清空窗口

if (sum > 10) {

   list.innerHTML = '';

   sum = 0;

}

<div>
    <h2>在线客服</h2>
    <!--contenteditable="true"属性则可以对该标签进行编辑-->
    <div contenteditable="true">
        <ul>
            <li></li>
        </ul>
    </div>
    <table>
        <tr>
            <td align="right">
                <!-- cols 和 rows 属性来规定 textarea 的尺寸cols是行，rows是列-->
                <textarea cols="50" rows="4" name="text"></textarea>
            </td>
            <td align="left">
                <button type=button>发送</button>
            </td>
        </tr>
    </table>
</div>

批改老师：天蓬老师批改时间：2019-01-13 09:29:28
老师总结：想起来了, 这个课程是我录制的, 你做的客服练习,就是考察你的dom操作, 看来你掌握了