用jQuery实现一个简易的聊天框

效果：

CSS代码：

body{
		margin: 0;
	}
	.kuan{
		height:550px;
		width: 650px;
		background-color: #ccc;
		margin: 80px auto;
	}
	.header{
		width: 100%;
		height: 35px;
		background-color: #00f;
	}
	.chatBody{
		width: 100%;
		height: 70%;
		overflow:auto;
	}
	.footer{
		width: 100%;
		height: 20%;
	}
	h2{
		margin-bottom: 0;
		text-align: center;
	}
	.send{
		background-color: green;
		width: 50px;
	}
	.btn{
		text-align: right;
	}
	.btn span{
		display: inline-block; 
		padding: 0 10px; 
		height: 25px;
    	overflow: hidden; 
    	color: #fff; 
    	border-radius: 5px; 
    	background-color: #069dd5; 
    	font-size: 12px; 
    	margin-right: 3px; 
    	cursor:pointer;
    }
    .chatText{
		border: none; 
		width: 100%; 
		height: 50px;
	}
	#input{
		margin-left: 200px;
		width: 100px;
	}
	.a{
    	background-color: green; 
    	border-radius: 5px;
    	width: 200px;
    	height: 100%;
	}

主代码：

		

			
聊天室
		
		

		

			
    		
关闭(C)发送(S)
    		
			
			
				
			
		
	

jQuery代码：