摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> &n
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0px;padding: 0px;}
.div{
height: 550px;
width: 300px;
background:#ccc;
text-align: center;
margin-left: 50px;
margin-top:10px;
}
.div div{
padding-top: 10px;
}
.content{
list-style: none;
width: 260px;
margin: 10px auto;
height: 380px;
color:black;
font-size:14px;
background: white;
overflow: auto;
}
.content li{
text-align: left;
margin:10px;
}
.text{
margin: 10px 0;
width: 260px;
height: 30px;
}
.submit{
width: 262px;
height:30px;
margin: 0px auto;
border:none;
background:lightblue;
color:#fff;
border-radius: 5px;
}
.submit:hover{
background:lightsalmon;
}
p{
height:40px;
line-height: 40px;
font-weight: bold;
font-size:20px;
background: yellowgreen;
}
</style>
</head>
<body>
<div class="div">
<p>在線客服</p>
<div>
<ul class="content"></ul>
</div>
<textarea class="text"></textarea><br>
<button class="submit">發(fā)表</button>
</div>
</body>
<script type="text/javascript">
let content = document.querySelector('.content');
let text = document.querySelector('.text');
let submit = document.querySelector('.submit');
let num = 0;
submit.onclick = function(){
if (num > 10){
content.innerHTML="";
}
let value = text.value;
let li = document.createElement("li");
li.innerHTML="游客："+value;
content.appendChild(li);
let li1 = document.createElement("li");
setTimeout(function(){
li1.style.color="red";
let arr = ["您好，很高興為您服務(wù)！","您能詳情說下嘛，我不太清楚","不好意思，你能說明白些嗎？","好海哦!","感覺人生達到了巔峰"];
let count = Math.round(Math.random()*arr.length)-1;
console.log(count);
li1.innerHTML = "客服："+arr[count];
content.appendChild(li1);
num ++;
},2000)
}
</script>
</html>添加了回復(fù)等待時間，用setTimeOut()函數(shù)，有兩個參數(shù)，第一個參數(shù)為函數(shù)，第二個為時間。本案例設(shè)置的為2S鐘
根學習的案例一樣添加了個計數(shù)器，在大于10條數(shù)據(jù)的時候進行清空。
樣式有所改動，在鼠標放到發(fā)送按鈕時，button背景色會切換。
數(shù)據(jù)添加多會出現(xiàn)樣式混亂，為ul標簽添加了overflow:auto，讓超出部分自動有個側(cè)邊滾動條。
代碼執(zhí)行結(jié)果如下：
批改老師：西門大官人批改時間：2019-03-03 13:28:18
老師總結(jié)：實現(xiàn)思路比較清晰，不錯。不過當數(shù)據(jù)多于10條后，最好不要全部清空，把前面的數(shù)據(jù)清除掉，保留后面的數(shù)據(jù)，界面和體驗上會更好一些