????：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div:nth-child(1){
width: 450px;
height:600px;
margin:20px auto;
background:dodgerblue;
box-shadow: 2px 2px 2px #aaa;
}
h2{text-align: center;margin-bottom:5px;}
div:nth-child(2){
border:4px double #ff5;
width:400px;
height:450px;
margin: 0px auto 5px;
overflow:auto
}
table{
width:408px;
height:80px;
margin:0px auto;
}
textarea{
width:350px;
border:none;
resize: none;
background:cornsilk;
}
button{
width:56px;
height:40px;
border:none;
background:#ff6700;
color:#fff;
font-size: 18px;
}
button:hover{
background:gold;
color:blue;
cursor: pointer;
}
ul{
list-style:none;
padding: 15px;
line-height: 30px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<h2>在線客服</h2>
<div>
<ul>
</ul>
</div>
<table>
<tr>
<td><textarea name="text" cols="50" rows="4"></textarea></td>
<td><button>提交</button></td>
</tr>
</table>
</div>
<script>
//獲取到頁面中的按鈕,文本域,對(duì)話內(nèi)容區(qū)的屬性并賦值
let btn= document.getElementsByTagName('button').item(0);
let text=document.getElementsByName('text').item(0);
let list=document.getElementsByTagName('ul')[0];
let sum=0; //計(jì)數(shù)器
//建立點(diǎn)擊事件函數(shù)
btn.onclick = function(){
console.log(text.value)
//判斷文本域的value值的長度是否為空，為空則返回假 終止執(zhí)行
if(text.value.length===0){
alert('您沒有輸入文本，請(qǐng)輸入內(nèi)容');
return false; //返回并終止
}
let userComment = text.value; //將用戶發(fā)送的內(nèi)容獲取并保存 賦值給變量
text.value =''; //獲取后緊跟清空文本val值
//創(chuàng)建一個(gè)新節(jié)點(diǎn)li
let li=document.createElement('li');
li.innerHTML=userComment //將用戶輸入的內(nèi)容添加到新節(jié)點(diǎn)中
let userPic = '<img src="/inc/peter.jpg" width="30" style="border-radius:50%">'; // 設(shè)置用戶頭像
li.innerHTML = userPic + ' ' + userComment; // 將用戶頭像與用戶的聊天內(nèi)容合并
list.appendChild(li); //發(fā)送聊天內(nèi)容,實(shí)際上就是將新節(jié)點(diǎn)插入到對(duì)話列表中
sum += 1; // 聊天記錄自增1
//用戶部分完畢
//設(shè)置定時(shí)器,默認(rèn)2秒后會(huì)自動(dòng)回復(fù)
setTimeout(function(){
//執(zhí)行內(nèi)容
let info = [
'真煩人,有話快說,別耽誤我玩抖音',
'除了退貨,退款,咱們什么都可以聊',
'說啥,本姑娘怎么聽不懂呢?再說一遍',
'在我方便的時(shí)候再回復(fù)你吧~~',
'投訴我的人多了,你算老幾~~~'
];
let temp = info[Math.floor(Math.random()*4)]; //獲取回復(fù)隨機(jī)內(nèi)容并賦值給變量
let reply = document.createElement('li'); //創(chuàng)建li元素
let kefuPic = '<img src="/inc/zly.jpg" width="30" style="border-radius:50%">'; // 設(shè)置用戶頭像
reply.innerHTML=kefuPic+''+ temp; //給新創(chuàng)建的li元素賦值內(nèi)容
list.appendChild(reply) //在ul元素尾部添加新創(chuàng)建的li
sum+=1;
},2000); //延時(shí)回復(fù)的毫秒數(shù)
//當(dāng)聊天記錄條數(shù)大于20條數(shù)清空窗口
if(sum>20){
list.innerHTML=''; //ul列表內(nèi)容等于空字符串，清空操作
sum=0; // 計(jì)數(shù)器清零
}
}
/* 一、用戶發(fā)送信息部分
1、首先獲取到頁面中的按鈕,文本域,對(duì)話內(nèi)容區(qū)的屬性并賦值。
2、建立點(diǎn)擊事件
2、判斷文本域的value值的長度是否為空，為空則返回假 終止執(zhí)行；
3、不為空，則獲取用戶發(fā)送的內(nèi)容并賦值給變量保存， 然后緊跟一個(gè)清空文本val值操作
4、然后創(chuàng)建一個(gè)新li元素、 并把獲取用戶發(fā)送內(nèi)容賦值給新元素li;
5、為了美觀又創(chuàng)建了一個(gè)頭像圖片元素，并把頭像變量和獲取用戶發(fā)送內(nèi)容一起賦值給新元素li
6、通過使用appendChild在父元素ul尾部將新節(jié)點(diǎn)li插入到對(duì)話列表中; 同時(shí)為了記錄條數(shù)，增加了一個(gè)條數(shù)累加
二、智能客服部分：
筆記1：定時(shí)器函數(shù)
setTimeout(function(){
//執(zhí)行內(nèi)容
},2000); //延時(shí)回復(fù)的毫秒數(shù)
筆記2：數(shù)組名或變量[Math.floor(Math.random()*4)] //Math.floor是向下取值 Math.random()隨機(jī)數(shù)
比如：取1-5之間的一個(gè)整數(shù):Math.floor(Math.random()*4)
比如數(shù)組litao[Math.floor(Math.random()*4)] //則獲取李濤數(shù)組下標(biāo)1-5隨機(jī)整數(shù)值
1、因?yàn)槟M客服回復(fù)，所以使用了時(shí)間定時(shí)函數(shù)，此函數(shù)有兩部分組成，一個(gè)是執(zhí)行內(nèi)容，一個(gè)是執(zhí)行延時(shí)時(shí)長。
2、建立數(shù)組內(nèi)容，正常是從服務(wù)器數(shù)據(jù)庫中調(diào)取，現(xiàn)在測(cè)試則建立了一個(gè)數(shù)組，使用math函數(shù)向下生成1-5的隨機(jī)
數(shù)個(gè)數(shù)組索引下標(biāo)。
3、建立新的元素li,和客服頭像，然后把客服頭像和回復(fù)內(nèi)容一起賦值給新元素li,最后在父級(jí)元素ul尾部添加新
元素li。然后記錄條數(shù)自增1
4、建立聊天記錄超過20條則清空聊天窗口，使用if判斷即可。如果不想清空聊天窗口，刪除計(jì)數(shù)器，在窗口div使
用overflow:auto自動(dòng)添加滑動(dòng)條。
總結(jié)：不管是客戶還是只能客服，遵循的邏輯都是一樣的，首先要獲取到界面中的元素屬性，然后建立點(diǎn)擊事件，
獲取到內(nèi)容，然后創(chuàng)建新的li元素，再把內(nèi)容復(fù)制給新元素li,然后把li查到父級(jí)的尾部顯示即可。
*/
</script>
</body>
</html>
實(shí)戰(zhàn)1的作業(yè)和實(shí)戰(zhàn)2的作業(yè)是一致的。
?? ???：韋小寶?? ??：2019-03-11 09:09:39
???? ??：寫的還算是很不錯(cuò)的 沒事要記得多去練習(xí)練習(xí)哦 可以考慮使用jQuery來把這個(gè)項(xiàng)目改寫一下 就是相當(dāng)于是把前端好好復(fù)習(xí)了一下 兩次作業(yè)一樣那回復(fù)就給你一樣的咯