本文例項為大家分享了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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。