摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>實(shí)戰(zhàn)客服聊天系統(tǒng)</title> <style type="text/css"> .center{width: 400px;height:600px;bord
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)戰(zhàn)客服聊天系統(tǒng)</title>
<style type="text/css">
.center{width: 400px;height:600px;border:2px #ccc solid;margin:20px auto;}
.center p{text-align: center;}
.center1{width:380px;height:400px;border:2px #ccc solid;margin:0px auto;}
.center1 ul{list-style: none;}
.center2{width:285px;margin-top:20px;}
.center2 textarea{width:320px;height:100px;margin-left:6px;}
.center2 button{width:50px;height:106px;border: none;border:1px #ccc solid;}
</style>
</head>
<body>
<div class="center">
<p>在線客服貓貓</p>
<div class="center1">
<ul>
<li></li>
</ul>
</div>
<table class="center2">
<tr>
<td align="right" class="right">
<textarea cols="30" rows="4" name="text"></textarea>
</td>
<td align="left" class="left">
<button>發(fā)送</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
let button = document.getElementsByTagName('button')[0];
let text = document.getElementsByName('text')[0];
let list = document.getElementsByTagName('ul')[0];
let sum = 0;
button.onclick = function(){
if (text.value.length ===0 ) {
alert('先生是不是忘記輸入內(nèi)容了')
return false;
}
let usecenter = text.value;
text.value = '';
let li = document.createElement('li');
li.innerHTML = usecenter;
let usePic = '<img src="./iamges/jie2.png" style="width:40px;height:40px;border-radius:50%;">';
li.innerHTML = usePic +' '+usecenter;
list.appendChild(li);
sum+=1;
//設(shè)置定時(shí)器,默認(rèn)2秒后會(huì)自動(dòng)回復(fù)
setTimeout(function(){
let info = [
'我不是很想和你一起玩，你找別人玩去吧!!!',
'吃什么啊，火鍋還是，牛排?',
'春天花兒都開了，你咋還不答應(yīng)和我和好?',
'如果暴力不是為了殺戮那將毫無意義!',
'投訴我的人多了,你算老幾~~~'
];
let temp = info[Math.floor(Math.random()*5)];
//取1-5之間的一個(gè)整數(shù):Math.floor(Math.random()*6 + 1)
let yang = document.createElement('li');
let kefuPic = '<img src="./iamges/jie3.png" style="width:40px;height:40px;border-radius:50%;">';
// reply.innerHTML = '你有啥事呀,我的帥哥哥' +kefuPic
yang.innerHTML = kefuPic + ' ' + '<span style="color:red">'+temp+'</span>';
list.appendChild(yang);
sum += 1;
},2000);
// 當(dāng)聊天記錄達(dá)到10條時(shí)清空窗口
if (sum > 10) {
list.innerHTML = '';
sum = 0;
}
}
</script>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-02-16 09:05:35
老師總結(jié)：和剛才應(yīng)該是同一個(gè)作業(yè) , 你可試著將一些功能,封裝成函數(shù),實(shí)現(xiàn)模塊化編程
