用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%;
	}

主代码：

<div class = "kuan">
		<div class = "header">
			<h2>聊天室</h2>
		</div>
		<div class = "chatBody"></div>
		<div class = "footer">
			<textarea class="chatText"></textarea>
    		<div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
    		<input type = "text" id = "input"></input>
			<input type = "submit" value = "确定" id = "sure"></input>
			<select id = "demo">
				<option value = ""></option>
			</select>
		</div>
	</div>

jQuery代码：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>

<script type="text/javascript">
		$("#demo").change(function(){
			$("#input").val($(this).val());//将下拉框里的内容放到文本框里
		});
		$(document).ready(function(){
		    $("#send").click(function(){
		        var $nei = $("textarea").val();
		        var $n = $("#input").val();
		        if($nei.length==""){
		            alert("你没写东西啊");
		        }else{
		            var $currentstr=$(".chatBody").append("<div>" + $n + ":" + "<p>" + $nei + "</p></div>");
		            $(".chatBody p").addClass("a");//消息框颜色
		            $("textarea").val("");//发送框消息消失
		        }
		    });
		});
	</script>