摘要：上一版本的案例主要通过ul中添加li的方式增加元素，但是需要每十行进行清空，本次案例主要把ul列表的数据改成div,并不断地往div里添加数据，并设置overflow-y:auto，让div可以自动往下撑。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g
上一版本的案例主要通过ul中添加li的方式增加元素，但是需要每十行进行清空，本次案例主要把ul列表的数据改成div,并不断地往div里添加数据，并设置overflow-y:auto，让div可以自动往下撑。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在线客服系统</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>发送</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('请输入聊天内容。');
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";
//设置定时器,默认0.5秒后会自动回复
setTimeout(function(){
let res = [
'您好，很高兴为您服务',
'正在查询，请稍后',
'可以提供联系电话吗？'
];
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>
批改老师：韦小宝批改时间：2018-11-09 09:12:58
老师总结：嗯！写的很不错！很全面！想要熟练的掌握还得课后多多练习哦！加油吧！
