abstract：上一版本的案例主要通過ul中添加li的方式增加元素，但是需要每十行進行清空，本次案例主要把ul列表的數(shù)據(jù)改成div,并不斷地往div里添加數(shù)據(jù)，并設(shè)置overflow-y:auto，讓div可以自動往下?lián)巍?lt;!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g
上一版本的案例主要通過ul中添加li的方式增加元素，但是需要每十行進行清空，本次案例主要把ul列表的數(shù)據(jù)改成div,并不斷地往div里添加數(shù)據(jù)，并設(shè)置overflow-y:auto，讓div可以自動往下?lián)巍?br/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在線客服系統(tǒng)</title>
<style type="text/css">
.headDiv {
width: 450px;
height: 650px;
background-color: #ccc;
margin: 30px auto;
color: #333;
box-shadow: 2px 2px 2px #808080
}
#divContent{
width:442px;
height: 500px;
margin:20px 0px;
overflow-y: auto;
border: 4px double green;
background-color: #efefef;
}
#divContent div{
width: 442px;
height: 50px;
margin: 5px 0px;
border: none;
}
h2 {
text-align: center;
margin-bottom: -10px;
}
table {
width: 90%;
height:80px;
margin: auto;
}
textarea{
border: none;
resize: none;
background-color: white;
overflow-y: auto;
}
button {
width: 60px;
height: 40px;
background-color: blue;
color: white;
border: none;
}
button:hover {
cursor: pointer;
background-color: pink;
}
</style>
</head>
<body>
<div class="headDiv">
<h2>在線客服聊天</h2>
<div id="divContent">
<!-- <textarea name="txtContent" id="" cols="53" rows="33"></textarea> -->
</div>
<table>
<tr>
<td><textarea cols="50" rows="4" id="txtInput" name="text"></textarea></td>
<td><button type=button>發(fā)送</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
//獲取標簽
let btn = document.getElementsByTagName('button').item(0);
let content = document.getElementById('txtInput');
// let area = document.getElementsByTagName('textarea').item(0);
let area=document.getElementById('divContent');
btn.onclick = function () {
if (content.value.length === 0) {
alert('請輸入聊天內(nèi)容。');
return false;
}
let contentValue = content.value;
//清空輸入框
content.value = '';
let div=document.createElement("div");
div.innerHTML="<img src='images/1.jpg' style='border-radius:10px;width:20px;height:20px;'>"+contentValue;
area.appendChild(div);
// area.value+=contentValue+"\r\n";
//設(shè)置定時器,默認0.5秒后會自動回復
setTimeout(function(){
let res = [
'您好，很高興為您服務(wù)',
'正在查詢，請稍后',
'可以提供聯(lián)系電話嗎？'
];
let temp = res[Math.floor(Math.random()*3)];
let divBack=document.createElement("div");
divBack.innerHTML="<img src='images/2.jpg' style='border-radius:10px;width:20px;height:20px;'>"+" <font style='color:red'>"+contentValue+"</font>";
area.appendChild(divBack);
// area.value+= temp+"\r\n";
},500);
}
</script>
</body>
</html>
Correcting teacher：韋小寶Correction time：2018-11-09 09:12:58
Teacher's summary：嗯！寫的很不錯！很全面！想要熟練的掌握還得課后多多練習哦！加油吧！