摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .div{height: 800px;width: 50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.div{height: 800px;width: 500px;border:1px solid #CCCCCC;margin:auto;background:#FAFAFA;}
.div h3{text-align: center;height: 80px;width: 100%;background: cornflowerblue;color: #FFFFFF;line-height: 80px;margin: 0;}
.div1{height:630px;width:100%;}
.div1 ul{list-style-type: none;padding: 0 20px;}
.div1 ul li{line-height: 50px;overflow: hidden;}
.div2{height: 70px;width: 100%;text-align: center;}
.div2 input{height: 50px;width: 380px;border:1px solid #C3C5C6;border-radius: 10px;padding: 0 10px;}
.div2 button{height: 55px;width: 80px;background: #C3C5C6;border:none;color: #FFFFFF;}
</style>
<body>
<div class="div">
<h3>在线客服</h3>
<div class="div1">
<ul></ul>
</div>
<div class="div2">
<input type="text" name="input">
<button onclick="submit()">发送</button>
</div>
</div>
</body>
<script>
var input = document.getElementsByTagName('input')[0];
var ul = document.getElementsByTagName('ul')[0];
var sum = 0; //计数器
function submit(){
if(input.value ==''){
alert('请输入信息！');
input.focus();
}
var li = document.createElement('li');
li.setAttribute('style','position: relative;')
//添加用户头像
var userPic = '<img src="../img/user.jpg" style="height:30px;width:30px;border-radius:15px;"/>'
li.innerHTML = '<span style="background:#ffffff;border-radius: 10px;position:absolute;right:40px;line-height:30px;top:10px;padding:0 10px">'+input.value+'</span>'+'  '+'<span style="position:absolute;right:0px;">'+userPic+'</span>' //拼接用户头像和输入信息
ul.appendChild(li);
input.value = '';
sum = sum+1;
//设置定时器 2秒后自动回复
setTimeout(function(){
var message = [
'对方不想和你说话，并向你扔了一只拖拉基',
'客服小姐姐正在忙',
'亲，有什么可以帮助你的嘛',
'嘀，我是智能机器人，有需要请回答',
'客服小姐姐下班吃饭了，稍后回复您'
];
var message1 = message[Math.floor(Math.random()*4)]; //随机数随机获取数组中的内容
var li1 = document.createElement('li');
//添加客户头像
var servicePic = '<img src="../img/service.jpg" style="height:30px;width:30px;border-radius:15px;"/>';
li1.innerHTML = servicePic+'  '+'<span style="background:pink;border-radius: 10px;padding:5px 10px">'+message1+'</span>';
ul.appendChild(li1);
sum = sum+1;
},2000);
//信息多余十条时 清空窗口并将计数器清零
if(sum>12){
ul.innerHTML = '';
sum = 0;
}
}
//setTimeout(code,millisec) code要执行的函数 millisec在执行代码前需等待的毫秒数
//Math.random() 0-1之间的随机数
//Math.floot() 取整数
</script>
</html>
1.获取input元素，ul元素，给button绑定点击事件，初始化变量sum存储信息条数
2.创建一个新元素li，创建一个变量存储用户头像，获取input框的值
3.将用户头像和input的值拼接在一起添加到li的内容中，将li添加到页面ul中，信息条数+1
4.创建一个数组存储客服回复的信息，math.floor(math.random())方法随机获取数组中的内容，setTimeout()方法设置定时器，2s后执行
5.创建一个新元素li1，创建一个变量存储客服头像
6.将客服头像和回复的信息拼接在一起添加到li1的内容中，将li1添加到页面ul中，信息条数+1
7.当信息条数sum>12条时，清空ul列表中的聊天信息，将sum值重置为0
批改老师：查无此人批改时间：2019-01-10 14:57:51
老师总结：不错呀，你的逻辑很清晰。学习就是整理知识，你做的很好，进步会很快，加油
