摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在线智能聊天信息</title> <style> .main{ width:&n
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线智能聊天信息</title>
<style>
.main{
width: 450px;
height: 650px;
background-color: lightskyblue;
margin: 30px auto;
color: #333;
box-shadow: 2px 2px 2px #808080;
text-align: center;
border-radius: 5px;
box-sizing: border-box;
padding:12px;
}
h2{margin:0;margin-bottom:18px;}
ul , li{margin:0;padding:0;}
ul {
height:528px;
padding-left:15px;
margin-bottom: 15px;
border: 1px solid #999;
border-radius: 5px;
background-color: aliceblue;
box-sizing: border-box;
overflow-y: auto;
}
li{list-style: none;text-align: left;margin-top:.75rem;display: flex;align-items: center;}
/* 最后一个li的处理 */
li:last-child{margin-bottom:.8rem;}
li img{width:30px;border-radius: 50%;margin-right:.5rem;}
.main div:last-child{display: flex;justify-content: center;align-items: center;}
/* 输入信息 */
textarea{resize: none;overflow: hidden;border-radius: 5px;outline: none;text-align: left;}
/* 发送按钮 */
button {background:#f1f1f1;padding:8px 10px;border-radius:3px;outline: none;border:1px solid #999;margin-left:20px;cursor: pointer;}
button:active{background:#00F7DE;}
</style>
</head>
<body>
<div class="main">
<h2>在线客服</h2>
<div>
<ul>
<li></li>
</ul>
</div>
<!-- 发送布局 -->
<div>
<!-- 文本域 -->
<textarea rows="2" cols="40" name="text">
</textarea>
<!-- 按钮 -->
<button >发送</button>
</div>
</div>
<script type="text/javascript">
//获取元素
let btn = document.getElementsByTagName('button')[0];
let text = document.getElementsByName('text').item(0);
let ul = document.getElementsByTagName('ul')[0];
//用户,客服头像
let userImg = '<img src="./img/zwt.png" />';
let kefuImg = '<img src="./img/fbb.jpg" />'
//客服回复消息
let msg = [
'真烦人,有话快说,别耽误我玩抖音',
'除了退货,退款,咱们什么都可以聊',
'说啥,本姑娘怎么听不懂呢?再说一遍',
'在我方便的时候再回复你吧~~',
'稍等片刻，客观!!!',
'正在处理，稍等哦！'
];
//当用户点击按钮时
btn.onclick = function(){
//如果没有内容,则返回
if(!text.value)return alert("亲，请输入内容呢！");
createLi(ul,text.value,userImg);
text.value = '';
//客服回复消息
setTimeout(function(){
let index = Math.floor(Math.random()*msg.length);
createLi(ul, msg[index],kefuImg);
},800);
}
/**
* 创建节点，并渲染在指定的节点上
* @param ul 指定的节点上
* @param str 消息
* @param img 指定的图片消息
*/
function createLi(ul,str,img){
let li = document.createElement('li');
li.innerHTML = img + " "+str;
ul.appendChild(li);
if(ul.children.length >= 15)ul.innerHTML = '';
}
</script>
</body>
</html>
批改老师：灭绝师太批改时间：2019-02-01 10:02:33
老师总结：作业是在老师的基础上有所扩展,或者是完善,要加油哦!
