摘要：總結(jié)：分別獲取到按鈕、輸入框內(nèi)容、以及保存數(shù)據(jù)的ul元素創(chuàng)建變量并賦值。創(chuàng)建一個(gè)計(jì)數(shù)變量賦值為0.創(chuàng)建按鈕點(diǎn)擊事件，當(dāng)點(diǎn)擊按鈕后檢查輸入框內(nèi)容如果為空彈出窗口提示輸入內(nèi)容。創(chuàng)建userCentent變量，把輸入框獲取到的值賦值給它。清空輸入框創(chuàng)建一個(gè)元素li并賦值給li變量創(chuàng)建一個(gè)用戶頭像img標(biāo)簽賦值給userPic組合一下數(shù)據(jù)，把用戶頭像和獲取到的輸入框內(nèi)容進(jìn)行組合，然后在ul內(nèi)最后面進(jìn)行添加
總結(jié)：
分別獲取到按鈕、輸入框內(nèi)容、以及保存數(shù)據(jù)的ul元素創(chuàng)建變量并賦值。
創(chuàng)建一個(gè)計(jì)數(shù)變量賦值為0.
創(chuàng)建按鈕點(diǎn)擊事件，當(dāng)點(diǎn)擊按鈕后檢查輸入框內(nèi)容如果為空彈出窗口提示輸入內(nèi)容。
創(chuàng)建userCentent變量，把輸入框獲取到的值賦值給它。
清空輸入框
創(chuàng)建一個(gè)元素li并賦值給li變量
創(chuàng)建一個(gè)用戶頭像img標(biāo)簽賦值給userPic
組合一下數(shù)據(jù)，把用戶頭像和獲取到的輸入框內(nèi)容進(jìn)行組合，然后在ul內(nèi)最后面進(jìn)行添加。添加完畢后sum變量自增加1.
創(chuàng)建一個(gè)定時(shí)器，在函數(shù)體內(nèi)部先創(chuàng)建一個(gè)變量并把客服回復(fù)說的話創(chuàng)建一個(gè)數(shù)組賦值給它。
創(chuàng)建一個(gè)變量用于保存自動(dòng)回復(fù)的內(nèi)容，由于只有5條數(shù)據(jù)所以變量內(nèi)容是隨機(jī)數(shù)*4向上取整。
再創(chuàng)建一個(gè)li元素、一個(gè)客服頭像的img元素并分別賦值給各自的變量。
最后組合頭像+內(nèi)容回復(fù)變量賦值給剛才創(chuàng)建的元素li，使用li.innerHTML，把內(nèi)容寫入LI里。
在ul最后面最佳上內(nèi)容看，sum自增+1；
定時(shí)器函數(shù)2秒執(zhí)行一次。
最后判斷一下如果sum變量大于10的時(shí)候，清空一下ul內(nèi)的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">發(fā)送</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('請(qǐng)輸入內(nèi)容');
return false;
}
var userCentent = text.value;
text.value='';
let li = document.createElement('li');
// 用戶頭像
let userPic = '<img src="http://ipnx.cn/static/images/user_avatar.jpg" width="30" style="border-radius:50%">';
li.innerHTML = userPic + ' ' +userCentent;
list.appendChild(li);
sum ++;
// 回復(fù)信息
setTimeout(function(){
let info = [
'您好有什么可以幫您的？',
'這個(gè)我可以幫您聯(lián)系售后部門',
'請(qǐng)您留下您的聯(lián)系方式，我們盡快答復(fù)',
'馬上幫您處理，請(qǐng)稍等。',
'這個(gè)可以幫您處理。'
];
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>
批改老師：查無此人批改時(shí)間：2019-04-16 09:37:32
老師總結(jié)：完成的不錯(cuò)。以后學(xué)了php，就可以從數(shù)據(jù)庫拿回復(fù)話了。像京東那樣機(jī)器回復(fù)。