摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM实战：模拟智能在线客服系统&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM实战：模拟智能在线客服系统</title>
<style type="text/css">
ul{list-style: none;line-height: 2em;overflow: hidden;}
.content{width:400px;height:600px;margin:10px auto;background: pink;}
h2{text-align: center;padding-top:10px;}
.content_top{width:340px;height:450px;margin:0px auto;background: white;border:1px solid #000;}
.content_bottom{width:340px;height: 60px;margin:10px auto;}
textarea{width:270px;height:50px;background: lightyellow;border:none;resize: none;}
button{float:right;width:55px;height:55px;border:none;background: #FF9900;}
button:hover{cursor: pointer;background: #ff6700;}
</style>
</head>
<body>
<div class="content">
<h2>在线客服</h2>
<div class="content_top">
<ul>
</ul>
</div>
<div class="content_bottom">
<textarea name="text" cols="50" rows="4"></textarea>
<button>发送</button>
</div>
</div>
<script>
let btn=document.getElementsByTagName('button')[0];
let text=document.getElementsByName('text')[0];
let list=document.getElementsByTagName('ul')[0];
let sum=0;
btn.onclick=function(){
if(text.value!=''){
let li=document.createElement('li');
li.innerHTML=text.value;
list.appendChild(li);
text.value='';
text.focus();
}else{
alert('请输入内容!')
}
}
</script>
</body>
</html>总结：能够实现简单的聊天功能，感觉很开心，学到许多知识，很充实。
批改老师：韦小宝批改时间：2018-11-20 09:14:13
老师总结：是的，在学习的时候完成了案例都会让我们兴奋！并且还会提高我们的学习信心！
