abstract：<!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];//获取到发送的内容要展示的地方
let sum = 0;//计数器
//添加点击事件
btn.onclick=function(){
if(text.value.length===0){
alert('您好像没有发送内容');
return false;
}
let containt = text.value;//获取到文本框输入的内容
text.value = ''//将用户留言区清空
let li = document.createElement('li');//添加li元素
li.innerHTML = '我：'+containt;//在窗口中要显示的内容
list.appendChild(li);//将用户信息添加到窗口中;
sum+=1;
//设置定时器2秒后自动回复
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);
//清空窗口并将计数器清零
if(sum>14){
list.innerHTML='';
sum=0;
}
}
</script>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-05-20 16:03:28
Teacher's summary：虽然是复制的教学代码, 但如何你完全理解了, 也是不错的