在线客服案例实现

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:650px;width:100%;}
		.div1 ul{list-style-type: none;}
		.div1 ul li{line-height: 50px;}
		.div2{height: 70px;width: 100%;text-align: center;}
		.div2 input{height: 30px;width: 400px;border:1px solid #C3C5C6;}
		.div2 button{height: 35px;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];
		
		function submit(){
			var li = document.createElement('li');
			if(input.value!=''){
				li.innerHTML = input.value;
				ul.appendChild(li);
				input.value = '';
			}else{
				alert('请输入信息！');
				input.focus();
			}
			
		}
		
	</script>
</html>

Correcting teacher：查无此人Correction time：2019-01-10 10:09:50
Teacher's summary：做的不错。之后有作业，在写点功能流程，或者你的想法。能看看你学的何如了，看哪里不足，给你提点建议。加油

在线客服案例实现

Popular Entries