首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jquery仿微信聊天界面

Posted in jQuery onMay 06, 2017

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

jquery仿微信聊天界面

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

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

首先定义一个大的

来盛放左右两个盒子。

<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 = "发送">
  </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 = "发送">
  </div>
 </div>

</div>

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

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

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>
<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 = "发送">
  </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 = "发送">
  </div>
 </div>
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jquery仿微信聊天界面

- Author -

画一生情入颜容

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
简单实现jQuery弹幕效果
May 06 #jQuery
jquery实现提示语淡入效果
May 05 #jQuery
Jquery获取radio选中的值
May 05 #jQuery
jQuery实现简单的抽奖游戏
May 05 #jQuery
jquery中each循环的简单回滚操作
May 05 #jQuery
jquery dataTable 获取某行数据
May 05 #jQuery
js和jquery中获取非行间样式
May 05 #jQuery
GTX1660(1) React(6) win10(43) i5 10400(1) 速龙(1) ipad(1) win11(40) i7 6700(1) i5 9400(1) Tomcat(18)
You might like
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
动态加载js和css(外部文件)
2013/04/17 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
javascript实现锁定网页、密码解锁效果（类似系统屏幕保护效果）
2014/08/15 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
异步加载JS、CSS代码（推荐）
2016/06/15 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
python写xml文件的操作实例
2014/10/05 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python之list对应元素求和的方法
2018/06/28 Python
Python实现京东秒杀功能代码
2019/05/16 Python
详解python解压压缩包的五种方法
2019/07/05 Python
解决Python二维数组赋值问题
2019/11/28 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
EJB实例的生命周期
2016/10/28 面试题
网络编辑职责
2014/03/01 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2014年检验员工作总结
2014/11/19 职场文书