快捷導航

jQuery實現(xiàn)簡易聊天框

更新時間：2020年02月08日 13:54:25 作者：可愛的強強

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡易聊天框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)簡易聊天框的具體代碼，供大家參考，具體內(nèi)容如下

效果：

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>關(guān)閉(C)</span><span id="send">發(fā)送(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());//將下拉框里的內(nèi)容放到文本框里
 });
 $(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("");//發(fā)送框消息消失
     }
   });
 });
</script>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: