首页
所有分类
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选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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
Pool(1) feDisplacementMap(1) element-china-area-data(1) Apache(17) sortInts(1) Navigator(1) Hudi(1) WebSockets(3) 数据重复(1) Flutter(2)
You might like
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
thinkphp 5框架实现登陆，登出及session登陆状态检测功能示例
2019/10/10 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
ES6的新特性概览
2016/03/10 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
使用JS批量选中功能实现更改数据库中的status状态值（批量展示）
2016/11/22 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python文件和目录操作详解
2015/02/08 Python
python实现用户登录系统
2016/05/21 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
学Python 3的理由和必要性
2019/11/19 Python
使用Python开发个京东上抢口罩的小实例（仅作技术研究学习使用）
2020/03/10 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
SmartBuyGlasses丹麦：网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
优秀员工自荐书范文
2013/12/08 职场文书
卫生巾广告词
2014/03/18 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
捐助感谢信
2015/01/22 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle