abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在線客服系統(tǒng)</title> </head> <style> *{margin: 0px;padd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在線客服系統(tǒng)</title>
</head>
<style>
*{margin: 0px;padding: 0px;}
body{background: #293455;}
.content{width: 500px; height: 600px;background: #fff;margin:20px auto;}
.content_title{width: 100%;height:60px;background: #000;color: #ccc;line-height: 60px;color:#fff;font-size: 18px}
.content_title span{margin-left: 20px;}
.content_chat{width: 100%;height: 450px;background: #ccc;border-bottom: 3px solid #444444}
.content_chat ul{list-style-type: none;width: 100%;height: 100%;}
.content_chat li{width: 100%;margin-bottom: 10px;float:left;margin-top: 10px;}
.content_chat .meg_serv{background: #fff;line-height: 20px;float:left;border-radius: 4px;padding: 3px;margin-left: 20px;}
.content_chat .meg_user{background: #5FA23B;line-height: 20px;float:right;border-radius: 4px;padding: 3px;margin-right: 20px;}
.conten_user{background: #ccc;height:87px;padding-top: 10px;}
.conten_user .user_text{width:400px; height: 70px;resize: none;border:none;margin-left: 5px;border-radius: 8px;float: left;}
.conten_user button{width:70px;height: 70px;float: right;margin-right: 10px;background: #5FA23B;border:none;border-radius: 8px;}
.conten_user button:hover{background: #ff6700;color:#fff;cursor: pointer;}
</style>
<body>
<div>
<div><span>在線客服系統(tǒng)</span></div>
<div>
<ul>
<li><span>歡迎光臨,這是在線客服消息</span></li>
</ul>
</div>
<div>
<textarea rows="3" cols="20"></textarea>
<button onclick="submit()">發(fā)送</button>
</div>
</div>
<script type="text/javascript">
let sum = 0;
function submit() {
let meg_user = document.getElementsByTagName('textarea')[0].value;
let user_chat = document.getElementsByTagName('ul')[0];
if(meg_user ==''){
alert('請輸入內(nèi)容再發(fā)送')
}
let count= document.getElementsByTagName('li').length;
if(count>8){
user_chat.innerHTML = '';
}
let user_li=document.createElement('li');
user_li.innerHTML = '<span>'+meg_user+'</span>'
user_chat.appendChild(user_li);
}
</script>
</body>
</html>本案例已完成在線客服點信息發(fā)送按鈕后聊天區(qū)域?qū)崟r顯示聊天內(nèi)容功能。用到的js dom知識上章節(jié)作業(yè)已寫完總結(jié)。主要是想要操作標簽內(nèi)容那就先找到元素，不論用標簽名，還是類名或id都可以只要能找到就OK。本案例用到的dom方法比較重要的是創(chuàng)建元素后給剛創(chuàng)建的元素innerHTML插入HTML內(nèi)容，接著給父類元素添回子類用到的方法appendChild(要增加的子元素);
Correcting teacher：滅絕師太Correction time：2019-01-08 09:26:02
Teacher's summary：總結(jié)的非常好，dom方法一直是前端非常重要的知識點，要好好掌握