jquery仿微信聊天界面

發(fā)布時間：2020-08-31 13:26:07 來源：腳本之家閱讀：156 作者：畫一生情入顏容欄目：web開發(fā)

首先看一下我們的效果圖。

jquery仿微信聊天界面

這個顏色可能搭配的有些不合適，但基本功能大都實現(xiàn)了。就是你和你同桌對話，你發(fā)的消息在你的左側(cè)，而在他設(shè)備的右側(cè)。

首先先寫好整體的框架，在一個大容器中放兩個盒子，分別是左側(cè)和右側(cè)的界面。然后每個盒子里面包含了三大部分：頭部、內(nèi)容區(qū)、和底部。只要寫好一側(cè)，另一側(cè)進行粘貼復(fù)制就可以了。

首先定義一個大的

來盛放左右兩個盒子。

<div id = "main">

 //左側(cè)聊天界面
 <div id = "box">
  <div id = "top"><span>你</span></div>
  <div id = "content">
   <select multiple="multiple" id="leftcontent">

   </select>
  </div>
  <div id = "bottom">
   <input type = "text" class = "sendText" id = "leftText" />
   <input type = "button" id = "leftdBtn" class="sendBtn" value = "發(fā)送">
  </div>
 </div>

//右側(cè)聊天界面
 <div id = "box">
  <div id = "top"><span>同桌</span></div>
  <div id = "content">
   <select multiple="multiple" id="rightcontent">

   </select>
  </div>
  <div id = "bottom">
   <input type = "text" class = "sendText" id = "rightText" />
   <input type = "button" id = "rightBtn" class="sendBtn" value = "發(fā)送">
  </div>
 </div>

</div>

首先這兩個盒子的代碼不是復(fù)制粘貼就直接可以的。還必須注意以下不同：

<div id = "content">
   <select multiple="multiple" id="rightcontent">
   </select>
</div>

select中的id得不同。我們一般都是

option1
option2
option3

這樣使用。而在這兒使用select標簽是當你和你同桌聊了一屏的天時，它有滾動條來上下滑動看你們都聊了些什么。再上面的基礎(chǔ)上增加一些css樣式，這樣界面效果就出來了。

接下來就是要寫jquery代碼的時候了。首先想一下你在你這邊說的話既要出現(xiàn)在你的設(shè)備右側(cè)，又要出現(xiàn)在你同桌設(shè)備的左側(cè)？

我們先對你的界面左側(cè)進行發(fā)消息控制，在寫了文本之后，按發(fā)送按鈕讓它出現(xiàn)在你界面的右側(cè)，同時也出現(xiàn)在你同桌設(shè)備的左側(cè)。

我們要按照以下步驟來實現(xiàn)：
1。獲得你輸入的文本框中的內(nèi)容。
2。生成一個option標簽。
2.1 生成標簽的樣式即生成的span標簽在你的設(shè)備的右側(cè)進行定位并顯示。
2.2 對生成的標簽進行內(nèi)容的插入即插入文本框中的內(nèi)容
3。將option標簽追加到你的select中。
4。將option標簽在你同桌設(shè)備的左側(cè)進行定位顯示。

5。清除文本框中的內(nèi)容。

function sendLeft(){

 //1.獲得你輸入的文本框中的內(nèi)容。
 var text = $("#leftText").val();

 //2。生成一個span標簽。
 var option = $("`<option></option>`");
 // 2.1 生成標簽的樣式即生成的span標簽在你的設(shè)備的右側(cè)進行定位并顯示。
 var len = text.length;
 option.css("width", len * 15 + "px");
 option.css("marginLeft", 350 - len * 15 - 60 + "px");
  //2.2 生成標簽的內(nèi)容
  option.html(text);

  //3. 將內(nèi)容追加到select中。
  $("#leftcontent").append(option);

  //4. 追加生成的標簽(右側(cè))
  var option1 = $("<option></option>");
  option1.addClass("optionRight");
  option1.css("width", len * 15 + "px");
  option1.css("marginLeft", 10 +"px");
  option1.html(text);
  $("#rightcontent").append(option1);

  //5. 清除文本框的內(nèi)容
  $("#leftText").val("");
  }
}

同樣再對你同桌的設(shè)備方進行顯示的時候，和左側(cè)的大同小異。
自己寫一下就可以。

在寫了左側(cè)和右側(cè)發(fā)送的消息函數(shù)之后，此時還不能進行消息發(fā)送，因為還沒有進行事件綁定。首先發(fā)送消息有兩種方式：
①。按鈕發(fā)送
按鈕發(fā)送就需要為按鈕綁定事件

 $("#leftdBtn").bind("click", sendLeft);
 $("#rightBtn").bind("click", sendRight);

②。回車發(fā)送

$(document).keydown(function(event){
   var txt1 = $("#leftText").val();
   var txt2 = $("#rightText").val() 
   if(event.keyCode == 13){
    if( txt1.trim() != ""){
     sendLeft();
    }
    if(txt2.trim() != ""){
     sendRight();
    }
   }
  });

最后附上完整的源代碼:

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
 <title>模仿微信聊天</title>
 <script type="text/javascript" src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 <style type="text/css">
 *{
  margin: 0px;
  padding: 0px;
 }

 #main{
  width: 90%;
  margin: 10px auto;
 }
 #box{
  float: left;
  margin:20px 120px; 
 }

 #top{
  width: 310px;
  padding: 10px 20px;
  color: white;
  background-color: lightgreen;
  font-size: 18px;
  font-family: "微軟雅黑";
  font-weight: bold;
 }

 #content{
  background-color: white;
 }

 select{
  width: 350px;
  height: 470px;
  background-color: white;
  padding: 10px;
  border:2px solid red;

 }

 #bottom{
  width: 310px;
  background-color: red;
  padding: 10px 20px;
 }

 .sendText{
  height: 25px;
  width: 210px;
  font-size: 16px;
 }

 .sendBtn{
  width: 65px;
  height: 30px;

  float: right;
  background-color: gold;
  color: white;
  text-align: center;
  font-size: 18px;
  }

 span{
   background-color: lightgreen;
   color: #000;
   padding: 10px 30px;

  }
  option{
   padding: 5px 10px;
   margin-top:10px; 
   border-radius:5px;
   width: 10px;
   min-height: 20px;
  }

  .optionRight{
   background-color: lightgreen; 
  }

  .optionLeft{
   background-color: lightblue; 
  }
 </style>

 <script>
 $(function(){

  $("#leftdBtn").bind("click", sendLeft);
  $("#rightBtn").bind("click", sendRight);

  function sendLeft(){

  //1. 獲取輸入框中的內(nèi)容
  var text = $("#leftText").val();
  //2. 生成標簽
  var option = $("<option></option>");
  option.addClass("optionLeft");
  //2.1 生成標簽的樣式
  var len = text.length;
  //option.css("width", len * 15 + "px","marginLeft", 350 - len * 15 - 60 + "px")
   option.css("width", len * 15 + "px");
   option.css("marginLeft", 350 - len * 15 - 60 + "px");
  //2.2 生成標簽的內(nèi)容
  option.html(text);
  //3. 將內(nèi)容追加到select中。
  $("#leftcontent").append(option);
  //4. 追加生成的標簽(右側(cè))
  var option1 = $("<option></option>");
  option1.addClass("optionRight");
  option1.css("width", len * 15 + "px");
  option1.css("marginLeft", 10 +"px");
  option1.html(text);
  $("#rightcontent").append(option1);

  //5. 清除文本框的內(nèi)容
  $("#leftText").val("");
  }  


 function sendRight(){

  //1. 獲取輸入框中的內(nèi)容
  var text = $("#rightText").val();
  //2. 生成標簽
  var option = $("<option></option>");
  option.addClass("optionLeft");
  //2.1 生成標簽的樣式
  var len = text.length;
  //option.css("width", len * 15 + "px","marginLeft", 350 - len * 15 - 60 + "px")
   option.css("width", len * 15 + "px");
   option.css("marginLeft", 350 - len * 15 - 60 + "px");
  //2.2 生成標簽的內(nèi)容
  option.html(text);
  //3. 將內(nèi)容追加到select中。
  $("#rightcontent").append(option);
  //4. 追加生成的標簽(右側(cè))
  var option1 = $("<option></option>");
  option1.addClass("optionRight");
  option1.css("width", len * 15 + "px");
  option1.css("marginLeft", 10 +"px");
  option1.html(text);
  $("#leftcontent").append(option1);

  $("#rightText").val("");
  }


  $(document).keydown(function(event){

   var txt1 = $("#leftText").val();
   var txt2 = $("#rightText").val() 
   if(event.keyCode == 13){
    if( txt1.trim() != ""){
     sendLeft();
    }
    if(txt2.trim() != ""){
     sendRight();
    }
   }
  });
 })
 </script>
</head>
<body>
<div id = "main">
 <div id = "box">
  <div id = "top"><span>你</span></div>
  <div id = "content">
   <select multiple="multiple" id="leftcontent">

   </select>
  </div>
  <div id = "bottom">
   <input type = "text" class = "sendText" id = "leftText" />
   <input type = "button" id = "leftdBtn" class="sendBtn" value = "發(fā)送">
  </div>
 </div>

  <div id = "box">
  <div id = "top"><span>同桌</span></div>
  <div id = "content">
   <select multiple="multiple" id="rightcontent">

   </select>
  </div>
  <div id = "bottom">
   <input type = "text" class = "sendText" id = "rightText" />
   <input type = "button" id = "rightBtn" class="sendBtn" value = "發(fā)送">
  </div>
 </div>
</div>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

jquery仿微信聊天界面

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽