摘要：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div:nth-child(1){
width: 450px;
height:600px;
margin:20px auto;
background:dodgerblue;
box-shadow: 2px 2px 2px #aaa;
}
h2{text-align: center;margin-bottom:5px;}
div:nth-child(2){
border:4px double #ff5;
width:400px;
height:450px;
margin: 0px auto 5px;
overflow:auto
}
table{
width:408px;
height:80px;
margin:0px auto;
}
textarea{
width:350px;
border:none;
resize: none;
background:cornsilk;
}
button{
width:56px;
height:40px;
border:none;
background:#ff6700;
color:#fff;
font-size: 18px;
}
button:hover{
background:gold;
color:blue;
cursor: pointer;
}
ul{
list-style:none;
padding: 15px;
line-height: 30px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<h2>在线客服</h2>
<div>
<ul>
</ul>
</div>
<table>
<tr>
<td><textarea name="text" cols="50" rows="4"></textarea></td>
<td><button>提交</button></td>
</tr>
</table>
</div>
<script>
//获取到页面中的按钮,文本域,对话内容区的属性并赋值
let btn= document.getElementsByTagName('button').item(0);
let text=document.getElementsByName('text').item(0);
let list=document.getElementsByTagName('ul')[0];
let sum=0; //计数器
//建立点击事件函数
btn.onclick = function(){
console.log(text.value)
//判断文本域的value值的长度是否为空，为空则返回假 终止执行
if(text.value.length===0){
alert('您没有输入文本，请输入内容');
return false; //返回并终止
}
let userComment = text.value; //将用户发送的内容获取并保存 赋值给变量
text.value =''; //获取后紧跟清空文本val值
//创建一个新节点li
let li=document.createElement('li');
li.innerHTML=userComment //将用户输入的内容添加到新节点中
let userPic = '<img src="/inc/peter.jpg" width="30" style="border-radius:50%">'; // 设置用户头像
li.innerHTML = userPic + ' ' + userComment; // 将用户头像与用户的聊天内容合并
list.appendChild(li); //发送聊天内容,实际上就是将新节点插入到对话列表中
sum += 1; // 聊天记录自增1
//用户部分完毕
//设置定时器,默认2秒后会自动回复
setTimeout(function(){
//执行内容
let info = [
'真烦人,有话快说,别耽误我玩抖音',
'除了退货,退款,咱们什么都可以聊',
'说啥,本姑娘怎么听不懂呢?再说一遍',
'在我方便的时候再回复你吧~~',
'投诉我的人多了,你算老几~~~'
];
let temp = info[Math.floor(Math.random()*4)]; //获取回复随机内容并赋值给变量
let reply = document.createElement('li'); //创建li元素
let kefuPic = '<img src="/inc/zly.jpg" width="30" style="border-radius:50%">'; // 设置用户头像
reply.innerHTML=kefuPic+''+ temp; //给新创建的li元素赋值内容
list.appendChild(reply) //在ul元素尾部添加新创建的li
sum+=1;
},2000); //延时回复的毫秒数
//当聊天记录条数大于20条数清空窗口
if(sum>20){
list.innerHTML=''; //ul列表内容等于空字符串，清空操作
sum=0; // 计数器清零
}
}
/* 一、用户发送信息部分
1、首先获取到页面中的按钮,文本域,对话内容区的属性并赋值。
2、建立点击事件
2、判断文本域的value值的长度是否为空，为空则返回假 终止执行；
3、不为空，则获取用户发送的内容并赋值给变量保存， 然后紧跟一个清空文本val值操作
4、然后创建一个新li元素、 并把获取用户发送内容赋值给新元素li;
5、为了美观又创建了一个头像图片元素，并把头像变量和获取用户发送内容一起赋值给新元素li
6、通过使用appendChild在父元素ul尾部将新节点li插入到对话列表中; 同时为了记录条数，增加了一个条数累加
二、智能客服部分：
笔记1：定时器函数
setTimeout(function(){
//执行内容
},2000); //延时回复的毫秒数
笔记2：数组名或变量[Math.floor(Math.random()*4)] //Math.floor是向下取值 Math.random()随机数
比如：取1-5之间的一个整数:Math.floor(Math.random()*4)
比如数组litao[Math.floor(Math.random()*4)] //则获取李涛数组下标1-5随机整数值
1、因为模拟客服回复，所以使用了时间定时函数，此函数有两部分组成，一个是执行内容，一个是执行延时时长。
2、建立数组内容，正常是从服务器数据库中调取，现在测试则建立了一个数组，使用math函数向下生成1-5的随机
数个数组索引下标。
3、建立新的元素li,和客服头像，然后把客服头像和回复内容一起赋值给新元素li,最后在父级元素ul尾部添加新
元素li。然后记录条数自增1
4、建立聊天记录超过20条则清空聊天窗口，使用if判断即可。如果不想清空聊天窗口，删除计数器，在窗口div使
用overflow:auto自动添加滑动条。
总结：不管是客户还是只能客服，遵循的逻辑都是一样的，首先要获取到界面中的元素属性，然后建立点击事件，
获取到内容，然后创建新的li元素，再把内容复制给新元素li,然后把li查到父级的尾部显示即可。
*/
</script>
</body>
</html>
实战1的作业和实战2的作业是一致的。
