????：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> button {&nbs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> button {
width: 60px;
height: 40px;
background-color: seagreen;
color: white;
border: none;
}
button:hover {
background-color: orange;
cursor: pointer;
width: 65px;
height: 42px;
}
</style>
</head>
<body>
<div style="width: 450px;height: 650px;background: lightskyblue;color: #333;margin: 30px auto;box-shadow: 2px 2px 2px #808080;" >
<h2 style="text-align: center;margin-bottom: -10px;">在線客服</h2>
<div style="width: 400px;height: 500px;border: 4px double green;background: #ccc;background-size:100%;margin: 20px auto 10px;" >
<ul style="list-style: none;line-height: 2em;overflow: hidden;padding: 15px; "><li></li></ul>
</div>
<table style="width: 90%;height:80px;margin: auto;">
<tr>
<td><textarea cols="50" rows="4" name="text" style="border: none;resize: none;
background-color: lightyellow;"></textarea></td>
<td><button type=button s>發(fā)送</button></td>
</tr>
</table>
</div>
</body>
</html>
<script type="text/javascript">
//1.獲取到頁面中的按鈕,文本域,對話內(nèi)容區(qū)
let ul=document.getElementsByTagName('ul').item(0);
let but=document.getElementsByTagName('button').item(0);
let text=document.getElementsByName('text').item(0);
let sum = 0;
//2.添加按鈕點擊事件,獲取用戶數(shù)據(jù)并推送到對話窗口中
but.onclick=function(){
//a.獲取用戶提交的內(nèi)容,并判斷當(dāng)內(nèi)容為null時
/* console.log( userInfo)
*/ if(text.value.length===0){
alert("客官，輸入的內(nèi)容不能為空喲!!!!!!");
return false;
}
let userInfo=text.value;
//b.立即清空用戶信息區(qū)
text.value='';
//c.創(chuàng)建一個新節(jié)點li用于顯示用戶提交的數(shù)據(jù)
let newLi = document.createElement('li')
// console.log( newLi)
/* //c-1.將用戶輸入的值添加到新的節(jié)點中
newLi.innerHTML=userInfo;*/
//c-2.設(shè)置用戶頭像
let userPic = '<img src="img/微信圖片.jpg" style="border-radius:50%;width:30px;height:30px;">';
//c-3.將用戶頭像與用戶的聊天內(nèi)容合并并添加到新的節(jié)點中
newLi.innerHTML='<span style="color:blue;float:right">'+userPic+userInfo+'</span>';
//c-4.發(fā)送聊天內(nèi)容,實際上就是將新節(jié)點插入到對話列表中
ul.appendChild(newLi);
//c-5.聊天記錄自增1
sum+=1;
//d.創(chuàng)建定時器setTimeout(function(){},定時時間)毫秒，用于機器人自動回復(fù)
setTimeout(function(){
//d-1.設(shè)置數(shù)組，用于存儲自動回復(fù)的字句
let info = [
'真煩人,有話快說,別耽誤我玩抖音',
'除了退貨,退款,咱們什么都可以聊',
'說啥,本姑娘怎么聽不懂呢?再說一遍',
'在我方便的時候再回復(fù)你吧~~',
'投訴我的人多了,你算老幾~~~'
];
//d-2.取1-5之間的隨機整數(shù)，將此整用作為數(shù)組下標(biāo)i
/*Math.ceil(x) -- 返回大于等于數(shù)字參數(shù)的最小整數(shù)(取整函數(shù))，對數(shù)字進行上舍入
Math.floor(x)--返回小于等于數(shù)字參數(shù)的最大整數(shù)，對數(shù)字進行下舍入
Math.random()[0，1) === 左閉右開區(qū)間
*/
let i=Math.floor(Math.random()*5);
let lemp=info[i];
//d-3.創(chuàng)建一個新節(jié)點li用于顯示機器人自動回復(fù)的內(nèi)容
let infoLi=document.createElement('li');
//d-4.設(shè)置用戶頭像
let jiqiPic = '<img src="img/微信圖片.jpg" style="border-radius:50%;width:30px;height:30px;">';
//d-5.將用戶頭像與用戶的聊天內(nèi)容合并
infoLi.innerHTML='<br><span style="color:red;">'+jiqiPic+lemp+'</span>';
//d-6.發(fā)送聊天內(nèi)容,實際上就是將新節(jié)點插入到對話列表中
ul.appendChild(infoLi);
//d-7.聊天記錄自增1
sum+=1;
},2000)
//e.將聊天記錄大于10清空并顯示第11條聊天數(shù)據(jù)
if(sum>10){
ul.innerHTML = '';
ul.appendChild(newLi);
sum = 0;
}
}
</script>
?? ???：天蓬老師?? ??：2018-12-19 14:34:50
???? ??：下次不要再直接粘貼課堂源碼發(fā)布了, 試著自己寫寫看, 否則你永遠 不知道你會了多少?