摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></titl
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0; list-style: none;}
.box{width: 450px; margin: 30px auto; height: 600px; padding: 15px; box-sizing: border-box; box-shadow: 0 0 10px #999; background: lightskyblue;}
.box h1{ width: 100%; text-align: center; height: 50px; line-height: 30px; font-size: 24px; font-weight: 500;}
.box ul{ width: 100%; background:#fafafa; height:450px; padding: 15px; box-sizing: border-box;}
.box ul li{padding: 5px 0;}
.box .bot{width: 100%;height:50px; margin-top: 15px; background: #fff; box-sizing: border-box;}
.box .bot input{width: 320px; float: left; height:100%; line-height: 48px;padding: 0 15px; box-sizing: border-box;border: none;}
.box .bot button{width: 95px;float: right; font-size:18px;color: #fff; height: 100%; line-height: 48px;border: none;background: #FFA200;}
.box .bot button:hover{background: #FF6700;cursor: pointer;}
</style>
</head>
<body>
<div class="box">
<h1>在線客服</h1>
<ul>
</ul>
<div class="bot">
<input type="text">
<button>提 交</button>
</div>
</div>
<script type="text/javascript">
let btn = document.getElementsByTagName('button')[0];//獲取到按鈕
let text = document.getElementsByTagName('input')[0];//獲取到文本框
let list = document.getElementsByTagName('ul')[0];//獲取到發(fā)送的內(nèi)容要展示的地方
let sum = 0;//計數(shù)器
//添加點擊事件
btn.onclick=function(){
if(text.value.length===0){
alert('您好像沒有發(fā)送內(nèi)容');
return false;
}
let containt = text.value;//獲取到文本框輸入的內(nèi)容
text.value = ''//將用戶留言區(qū)清空
let li = document.createElement('li');//添加li元素
li.innerHTML = '我：'+containt;//在窗口中要顯示的內(nèi)容
list.appendChild(li);//將用戶信息添加到窗口中;
sum+=1;
//設(shè)置定時器2秒后自動回復(fù)
setTimeout(function(){
let info = [
'你好！',
'你說什么？',
'我好像不明白',
'...'
];
let temp = info[Math.floor(Math.random()*4)];
let reply = document.createElement('li');
reply.innerHTML='<span style="color:#ffa200">'+'客服：'+temp+'</span>';
list.appendChild(reply);
sum+=1;
},2000);
//清空窗口并將計數(shù)器清零
if(sum>14){
list.innerHTML='';
sum=0;
}
}
</script>
</body>
</html>
批改老師：天蓬老師批改時間：2019-05-20 16:03:28
老師總結(jié)：雖然是復(fù)制的教學(xué)代碼, 但如何你完全理解了, 也是不錯的