jquery仿微信聊天界面实例分享-js教程-PHP中文网

首页

web前端

js教程

jquery仿微信聊天界面实例分享

小云云

Jan 12, 2018 am 11:20 AM

jquery 分享实例

本文主要为大家详细介绍了jquery仿微信聊天界面的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

首先看一下我们的效果图。

这里写图片描述

这个颜色可能搭配的有些不合适，但基本功能大都实现了。就是你和你同桌对话，你发的消息在你的左侧，而在他设备的右侧。

首先先写好整体的框架，在一个大容器中放两个盒子，分别是左侧和右侧的界面。然后每个盒子里面包含了三大部分：头部、内容区、和底部。只要写好一侧，另一侧进行粘贴复制就可以了。

首先定义一个大的

来盛放左右两个盒子。

<p id = "main">

 //左侧聊天界面
 <p id = "box">
  <p id = "top"><span>你</span></p>
  <p id = "content">
   <select multiple="multiple" id="leftcontent">

   </select>
  </p>
  <p id = "bottom">
   <input type = "text" class = "sendText" id = "leftText" />
   <input type = "button" id = "leftdBtn" class="sendBtn" value = "发送">
  </p>
 </p>

//右侧聊天界面
 <p id = "box">
  <p id = "top"><span>同桌</span></p>
  <p id = "content">
   <select multiple="multiple" id="rightcontent">

   </select>
  </p>
  <p id = "bottom">
   <input type = "text" class = "sendText" id = "rightText" />
   <input type = "button" id = "rightBtn" class="sendBtn" value = "发送">
  </p>
 </p>

</p>

登录后复制

首先这两个盒子的代码不是复制粘贴就直接可以的。还必须注意以下不同：

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

登录后复制

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

option1
option2
option3

这样使用。而在这儿使用select标签是当你和你同桌聊了一屏的天时，它有滚动条来上下滑动看你们都聊了些什么。再上面的基础上增加一些css样式，这样界面效果就出来了。

接下来就是要写jquery代码的时候了。首先想一下你在你这边说的话既要出现在你的设备右侧，又要出现在你同桌设备的左侧？

我们先对你的界面左侧进行发消息控制，在写了文本之后，按发送按钮让它出现在你界面的右侧，同时也出现在你同桌设备的左侧。

我们要按照以下步骤来实现：
1。获得你输入的文本框中的内容。
2。生成一个option标签。
2.1 生成标签的样式即生成的span标签在你的设备的右侧进行定位并显示。
2.2 对生成的标签进行内容的插入即插入文本框中的内容
3。将option标签追加到你的select中。
4。将option标签在你同桌设备的左侧进行定位显示。

5。清除文本框中的内容。

function sendLeft(){

 //1.获得你输入的文本框中的内容。
 var text = $("#leftText").val();

 //2。生成一个span标签。
 var option = $("`<option></option>`");
 // 2.1 生成标签的样式即生成的span标签在你的设备的右侧进行定位并显示。
 var len = text.length;
 option.css("width", len * 15 + "px");
 option.css("marginLeft", 350 - len * 15 - 60 + "px");
  //2.2 生成标签的内容
  option.html(text);

  //3. 将内容追加到select中。
  $("#leftcontent").append(option);

  //4. 追加生成的标签(右侧)
  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. 清除文本框的内容
  $("#leftText").val("");
  }
}

登录后复制

同样再对你同桌的设备方进行显示的时候，和左侧的大同小异。
自己写一下就可以。

在写了左侧和右侧发送的消息函数之后，此时还不能进行消息发送，因为还没有进行事件绑定。首先发送消息有两种方式：
①。按钮发送
按钮发送就需要为按钮绑定事件

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

登录后复制

②。回车发送

$(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. 获取输入框中的内容
  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 生成标签的内容
  option.html(text);
  //3. 将内容追加到select中。
  $("#leftcontent").append(option);
  //4. 追加生成的标签(右侧)
  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. 清除文本框的内容
  $("#leftText").val("");
  }  


 function sendRight(){

  //1. 获取输入框中的内容
  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 生成标签的内容
  option.html(text);
  //3. 将内容追加到select中。
  $("#rightcontent").append(option);
  //4. 追加生成的标签(右侧)
  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>
<p id = "main">
 <p id = "box">
  <p id = "top"><span>你</span></p>
  <p id = "content">
   <select multiple="multiple" id="leftcontent">

   </select>
  </p>
  <p id = "bottom">
   <input type = "text" class = "sendText" id = "leftText" />
   <input type = "button" id = "leftdBtn" class="sendBtn" value = "发送">
  </p>
 </p>

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

   </select>
  </p>
  <p id = "bottom">
   <input type = "text" class = "sendText" id = "rightText" />
   <input type = "button" id = "rightBtn" class="sendBtn" value = "发送">
  </p>
 </p>
</p>
</body>
</html>

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7449

CakePHP 教程

1374

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

夸克网盘怎么分享到百度网盘？ Mar 14, 2024 pm 04:40 PM

　　夸克网盘和百度网盘都是很便利的存储工具，不少的用户们都在询问这两款软件互通吗？夸克网盘怎么分享到百度网盘？下面就让本站来为用户们来仔细的介绍一下夸克网盘的文件怎么保存到百度网盘方法吧。　　夸克网盘的文件怎么保存到百度网盘方法　　1、想要知道怎么把夸克网盘的文件转到百度网盘，首先在夸克网盘上下载需要保存的文件，然后打开百度网盘客户端后，选择压缩文件要保存的文件夹，双击打开该文件夹。　　2、打开该文件夹后，点击窗口左上角区域的“上传”。　　3、在电脑中找到需要上传的压缩文件，点击选

网易云音乐怎么分享到微信朋友圈_网易云音乐分享到微信朋友圈教程 Mar 25, 2024 am 11:41 AM

1、首先我们进入到网易云音乐中，然后在软件首页界面中，点击进入到歌曲的播放界面中。2、然后在歌曲播放界面中，找到右上方的分享功能按钮，如下图红框所示位置，点击选择分享的渠道;在分享渠道中，点击底部的“分享至”选项，然后选择第一个“微信朋友圈”，即可将内容分享至微信朋友圈。

百度网盘怎么分享文件给好友 Mar 25, 2024 pm 06:52 PM

近期，百度网盘安卓客户端迎来了全新的8.0.0版本，这一版本不仅带来了众多变化，还增添了诸多实用功能。其中，最为引人注目的便是文件夹共享功能的增强。现在，用户可以轻松邀请好友加入，共同分享工作和生活中的重要文件，实现更加便捷的协作与共享。那么究竟该如何分享给好友自己需要分享的文件呢，下文中本站小编就将为大家带来详细内容介绍，希望能帮助到大家！1）打开百度云APP，首先点击在首页中选择相关的文件夹，然后再点击界面右上角的【...】图标；（如下图）2）随后点击“共享成员”一栏中的【+】，最后在勾选所

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

分享惠普打印机驱动的两种安装方法 Mar 13, 2024 pm 05:16 PM

　　惠普打印机是很多办公室内必备的打印设备，在电脑上安装打印机驱动，可以完美解决打印机无法连接等等问题。那么惠普打印机驱动怎么安装？下面小编就给大家介绍两个惠普打印机驱动程序安装方法。　　第一种方法：官网下载驱动　　1、在搜索引擎中搜索惠普中国官网，在支持一栏中，选择【软件与驱动程序】。　　2、选择【打印机】分类，在搜索框中输入你的打印机型号，点击【提交】，即可查找到你的打印机驱动。　　3、根据你电脑的系统选择对应的打印机，win10即选择win10系统的驱动。　　4、下载成功后，在文件夹中找到

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

解决Discuz微信分享无法显示的问题 Mar 09, 2024 pm 03:39 PM

标题：解决Discuz微信分享无法显示的问题，需要具体代码示例随着移动互联网的发展，微信成为了人们日常生活中不可或缺的一部分。在网站开发中，为了提升用户体验和扩大网站的曝光度，很多站点会集成微信分享功能，让用户能够方便地分享网站的内容到朋友圈或者微信群中。然而，有时候在使用Discuz等开源论坛系统时，会遇到微信分享无法显示的问题，这给用户体验带来了一定的困

See all articles

jquery仿微信聊天界面实例分享

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题