abstract：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>DOM實戰(zhàn)模擬智能在線客服系統(tǒng)</title><style> /*第一個div樣式*/ div:nth-child(1){
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM實戰(zhàn)模擬智能在線客服系統(tǒng)</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>發(fā)送</button>
</div>
<script>
//
let btn = document.getElementsByTagName('button')[0];
let info = document.getElementsByName('info')[0];
let list = document.getElementsByTagName('ul')[0];
let sum = 0;//計數(shù)器
btn.onclick = function(){
// alert(info.value);
if(info.value.length === 0){
alert('輸點內容');
return false;
}
// 將用戶提交的內容獲取并保存
let userComment = info.value;
info.value = '';//清空用戶留言區(qū)
//創(chuàng)建一個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);
//清空窗口并將計數(shù)器清零
if(sum<10){
list.innerHTML='';
sum=0;
}
}
</script>
</body>
</html>