在线客服案例实现

abstract：<!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>'+'&nbsp;&nbsp;&nbsp'+'<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+'&nbsp;&nbsp;&nbsp'+'<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
Correcting teacher：查无此人Correction time：2019-01-10 14:57:51
Teacher's summary：不错呀，你的逻辑很清晰。学习就是整理知识，你做的很好，进步会很快，加油
在线客服案例实现

Popular Entries
