在线客服案例 --到底哪儿错 了呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM实战模拟智能在线客服系统</title>
<style>
/*第一个div样式*/
div:nth-child(1){
width:400px;
height: 500px;
background: lightskyblue;
margin:30px auto;
color:#333;
box-shadow: 2px 2px 2px #808080;
}
h2 {
text-align: center;
margin-bottom: -10px;
}
/*第二个div样式*/
div:nth-child(2){
width:300px;
height: 350px;
background: white;
margin:30px auto;
color:#333;
box-shadow: 2px 2px 2px #808080;
}
input {
width: 300px;
height: 40px
}
button {
width: 60px;
height: 40px;
background: white;
border: none;
}
button:hover{
background: orange;
cursor: pointer;
}
/* ul,li{
list-style: none;
}*/
</style>
</head>
<body>
<div>
<h2>在线客服</h2>
<div>
<ul>
<li></li>
</ul>
</div>
<input type="text" name="info">
<button>发送</button>
</div>
<script>
//
let btn = document.getElementsByTagName('button')[0];
let info = document.getElementsByName('info')[0];
let list = document.getElementsByTagName('ul')[0];
let sum = 0;//计数器
btn.onclick = function(){
// alert(info.value);
if(info.value.length === 0){
alert('输点内容');
return false;
}
// 将用户提交的内容获取并保存
let userComment = info.value;
info.value = '';//清空用户留言区
//创建一个li
let li = document.createElement('li');
//用户头像
let userPic = '<img src="http://img.zcool.cn/community/01bebb584fc346a8012060c895f309.gif" width="30" style="border-radius:30%" alt="" />';
li.innerHTML = userPic + ' ' +userComment;
//将用户信息添加到窗口中
list.appendChild(li);
sum+= 1;
//设置定时器1秒后自动回复
setTimeout(function(){
//自动回复信息模板
let msg = [
'你好，请问有什么可以帮到您',
'不在线请至电17122223333',
'请稍后 正在接入客服',
'1技术咨询2商务合作',
];
let temp = msg[Math.floor(Math.random()*4)];
let reply = document.createElement('li');
let kefuPic = '<img src="http://img.zcool.cn/community/01895059eda88da801216a4b296e34.jpg@1280w_1l_2o_100sh.jpg" width="30" style="border-radius:30%" alt="" />';
reply.innerHTML=kefuPic+' '+'<span style="color:red">'+temp+'</span>';
list.appendChild(reply);
sum +=1;
},1500);
//清空窗口并将计数器清零
if(sum<10){
list.innerHTML='';
sum=0;
}
}
</script>
</body>
</html>