亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

在線客服案例實(shí)現(xiàn)

原創(chuàng) 2019-01-10 14:49:16 270
摘要:<!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()">發(fā)送</button>
			</div>
		</div>
	</body>
	
	<script>
		var input = document.getElementsByTagName('input')[0];
		var ul = document.getElementsByTagName('ul')[0];
		var sum = 0;   //計(jì)數(shù)器
		
		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;
			
			//設(shè)置定時(shí)器  2秒后自動(dòng)回復(fù)
			setTimeout(function(){
				var message = [
				'對方不想和你說話,并向你扔了一只拖拉基',
				'客服小姐姐正在忙',
				'親,有什么可以幫助你的嘛',
				'嘀,我是智能機(jī)器人,有需要請回答',
				'客服小姐姐下班吃飯了,稍后回復(fù)您'
				];
				
				var message1 = message[Math.floor(Math.random()*4)];   //隨機(jī)數(shù)隨機(jī)獲取數(shù)組中的內(nèi)容
				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);
			
			//信息多余十條時(shí)    清空窗口并將計(jì)數(shù)器清零
			if(sum>12){
				ul.innerHTML = '';
				sum = 0;
			}
		}
		
		//setTimeout(code,millisec)   code要執(zhí)行的函數(shù)     millisec在執(zhí)行代碼前需等待的毫秒數(shù)
		//Math.random() 0-1之間的隨機(jī)數(shù) 
		//Math.floot() 取整數(shù)
	</script>
</html>

1.獲取input元素,ul元素,給button綁定點(diǎn)擊事件,初始化變量sum存儲信息條數(shù)
2.創(chuàng)建一個(gè)新元素li,創(chuàng)建一個(gè)變量存儲用戶頭像,獲取input框的值
3.將用戶頭像和input的值拼接在一起添加到li的內(nèi)容中,將li添加到頁面ul中,信息條數(shù)+1
4.創(chuàng)建一個(gè)數(shù)組存儲客服回復(fù)的信息,math.floor(math.random())方法隨機(jī)獲取數(shù)組中的內(nèi)容,setTimeout()方法設(shè)置定時(shí)器,2s后執(zhí)行
5.創(chuàng)建一個(gè)新元素li1,創(chuàng)建一個(gè)變量存儲客服頭像
6.將客服頭像和回復(fù)的信息拼接在一起添加到li1的內(nèi)容中,將li1添加到頁面ul中,信息條數(shù)+1
7.當(dāng)信息條數(shù)sum>12條時(shí),清空ul列表中的聊天信息,將sum值重置為0


批改老師:查無此人批改時(shí)間:2019-01-10 14:57:51
老師總結(jié):不錯(cuò)呀,你的邏輯很清晰。學(xué)習(xí)就是整理知識,你做的很好,進(jìn)步會很快,加油

發(fā)佈手記

熱門詞條