abstract：总结：分别获取到按钮、输入框内容、以及保存数据的ul元素创建变量并赋值。创建一个计数变量赋值为0.创建按钮点击事件，当点击按钮后检查输入框内容如果为空弹出窗口提示输入内容。创建userCentent变量，把输入框获取到的值赋值给它。清空输入框创建一个元素li并赋值给li变量创建一个用户头像img标签赋值给userPic组合一下数据，把用户头像和获取到的输入框内容进行组合，然后在ul内最后面进行添加
总结：
分别获取到按钮、输入框内容、以及保存数据的ul元素创建变量并赋值。
创建一个计数变量赋值为0.
创建按钮点击事件，当点击按钮后检查输入框内容如果为空弹出窗口提示输入内容。
创建userCentent变量，把输入框获取到的值赋值给它。
清空输入框
创建一个元素li并赋值给li变量
创建一个用户头像img标签赋值给userPic
组合一下数据，把用户头像和获取到的输入框内容进行组合，然后在ul内最后面进行添加。添加完毕后sum变量自增加1.
创建一个定时器，在函数体内部先创建一个变量并把客服回复说的话创建一个数组赋值给它。
创建一个变量用于保存自动回复的内容，由于只有5条数据所以变量内容是随机数*4向上取整。
再创建一个li元素、一个客服头像的img元素并分别赋值给各自的变量。
最后组合头像+内容回复变量赋值给刚才创建的元素li，使用li.innerHTML，把内容写入LI里。
在ul最后面最佳上内容看，sum自增+1；
定时器函数2秒执行一次。
最后判断一下如果sum变量大于10的时候，清空一下ul内的li，并且sum归零。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div:nth-child(1){
width: 450px;
height: 650px;
background: lightskyblue;
margin:30px auto;
color: #333;
box-shadow: 2px 2px 2px #808080;
}
h2{
text-align: center;
margin-bottom:-10px;
}
div:nth-child(2){
width: 400px;
height: 500px;
border:4px double green;
background: #efefef;
margin:20px auto 10px;
}
ul{
list-style: none;
line-height: 2em;
overflow: hidden;
padding:15px;
}
table{
width: 90%;
height: 80px;
margin:auto;
}
textarea{
border: none;
resize:none;
background: lightyellow;
}
button{
width: 60px;
height: 40px;
background: seagreen;
color:white;
border: none;
}
button:hover{
cursor: pointer;
background: orange
}
</style>
</head>
<body>
<div class="">
<h2>在线客服</h2>
<div class="">
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td>
<textarea name="text" id="" cols="50" rows="4"></textarea>
</td>
<td>
<button type="button">发送</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
let btn = document.getElementsByTagName('button')[0]
let text = document.getElementsByName('text')[0];
let list = document.getElementsByTagName('ul')[0];
let sum = 0;
btn.onclick=function(){
if(text.value.length===0){
alert('请输入内容');
return false;
}
var userCentent = text.value;
text.value='';
let li = document.createElement('li');
// 用户头像
let userPic = '<img src="http://www.php.cn/static/images/user_avatar.jpg" width="30" style="border-radius:50%">';
li.innerHTML = userPic + ' ' +userCentent;
list.appendChild(li);
sum ++;
// 回复信息
setTimeout(function(){
let info = [
'您好有什么可以帮您的？',
'这个我可以帮您联系售后部门',
'请您留下您的联系方式，我们尽快答复',
'马上帮您处理，请稍等。',
'这个可以帮您处理。'
];
let temp = info[Math.floor(Math.random()*4)];
let reply = document.createElement('li');
let kefuPic = '<img src="http://p4.music.126.net/0PJOX5d5lQ1iFO395aWsnQ==/109951163845700865.jpg" width="30" style="border-radius:50%">';
reply.innerHTML = kefuPic + ' '+'<span sytle="color:red">' +temp+'</span>';
list.appendChild(reply);
sum ++;
},2000)
if(sum>10){
list.innerHTML =''
sum = 0;
}
}
</script>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-04-16 09:37:32
Teacher's summary：完成的不错。以后学了php，就可以从数据库拿回复话了。像京东那样机器回复。