先来看看我们的效果图。

这个颜色可能不太匹配，但是大部分基本功能都已经实现了。也就是你和同桌说话，你发的信息在你的左边，但是在他设备的右边。

首先编写整体框架，在一个大容器里放两个盒子，分别是左右接口。然后每个框包含三个部分：头部、内容区域和底部。只写一面，粘贴复制另一面。

首先定义一个大的

拿着左右两个盒子。

Div id='main' /左聊天界面div id=' box ' div id=' top ' spanyou您/span/Div id=' content ' select multiple=' multiple ' id=' left content '/select/Div id=' bottom ' input type=' text ' class=' send text ' id=' left text '/input type=' button ' id=' left dbtn ' class=' send BTN ' value=' send '/Div/Div//右聊天界面div id=' box ' div id=' top ' spanyou同桌/span div div id=' bottom ' input type=' text ' class=' send text ' id=' right text '/input type=' button ' id=' right BTN ' class=' send BTN ' value=' send '/div/div/div首先，这两个框的代码可以直接复制粘贴。 还必须注意以下差异：

div id=' content ' select multiple=' multiple ' id=' right content '/select/div select。我们通常是

选项1选项2选项3

这样用。这里，select tag是你和同桌聊一屏的时候用的，它有滚动条可以上下滑动看到你聊的内容。在上面的基础上增加一些css样式，这样界面效果就出来了。

那么是时候编写jquery代码了。首先想一想自己这边说的话，应该出现在设备的右侧，也应该出现在同桌设备的左侧。

我们首先控制您界面左侧的消息。写完文本后，按下发送按钮，使其出现在界面的右侧和同桌的左侧。

我们应该遵循以下步骤：1。获取您输入的文本框内容。2。生成选项标签。2.1生成标签的样式意味着生成的span标签位于并显示在设备的右侧。2.2插入生成标签的内容，即在文本框3中插入内容。将选项标签附加到您的选择。4。将选项标签放置并显示在同桌的左侧。

5。清除文本框的内容。

函数sendLeft(){ //1。获取您输入的文本框内容。var text=$('#leftText ')。val()；//2。生成跨度标记。var option=$(' ` option/option ` ')；//2.1生成的标签样式意味着生成的跨度标签位于并显示在您设备的右侧。var len=text.lengthoption.css('width '，len * 15 ' px ')；option.css('marginLeft '，350-len * 15-60 ' px ')；//2.2生成标签的content option.html(文本)；//3.追加要选择的内容。$('#leftcontent ')。追加(选项)；//4.追加生成的标签(右侧)var option 1=$(' option/option ')；option 1 . add class(' option right ')；option1.css('width '，len * 15 ' px ')；option1.css('marginLeft '，10 ' px ')；option1.html(文本)；$('#rightcontent ')。追加(选项1)；//5.清除文本框$('#leftText ')的内容。val(“”)；}}再次在同桌展示设备时，与左边的类似。你自己写就行了。

写好左右两边发送的消息函数后，此时无法发送消息，因为事件绑定还没有完成。先发消息有两种方式：。按钮发送按钮发送需要按钮的绑定事件

$('#leftdBtn ')。绑定('点击'，发送左键)；$('#rightBtn ')。bind('click '，send right)；.输入发送

$(文档)。keydown(函数(事件){ var txt 1=$(' #左文本')).val()；var txt2=$('#rightText ').val()if(事件。键码==13){ if(txt 1。trim()！=' '){ SendLeft()；} if(txt2.trim()！=' '){ SendRight()；} } });最后附上完整的源代码：

！DOCTYPE html html heartheta charset=' utf-8 '/title模仿微信聊天/title脚本类型=' text/JAVAScript ' src=' http://libs。百度。com/jquery/1。9 .0/jquery。js /脚本样式类型=' text/CSS ' * { margin : 0px；padd : 0px } # main { width : 90%；余量： 10px自动；} # box { float : left margin 3 336020 px 120 px；} # top { width : 310 xpadding : 10px 20pxcolor :白色；背景-颜色：浅绿色；font-size : 18px字体系列： '微软雅黑；字体粗细：粗体；} #内容{背景-颜色：白色；}选择{宽度： 350像素高度： 470像素；背景-颜色：白色；padding: 10pxborder:2px纯红；} #底部{ width: 310px背景-颜色：红色；padding: 10px 20px }。发送文本{高度： 25px宽度： 210 pxfont-size : 16px} .send Btn { width : 65px x8 : 30px向右浮动：背景-颜色：金色；颜色：白色；文本对齐：中心；font-size : 18px} span{背景-颜色：浅绿色；color : # 000 padd : 10px 30px }选项{ padd : 5px 10pxmargin-top :10 px；边界半径：5像素；宽度： 10px最小高度： 20px} .选项右侧{背景色：浅绿色；} .选项左{背景色：浅蓝色；}/style script $(function(){ $(' # left dbtn ').绑定('点击，向左发送)；$('#rightBtn ').绑定('点击'，向右发送)；函数sendLeft(){ //1 .获取输入框中的内容var text=$('#leftText ').val()；//2.生成标签var option=$(' option/option ')；选项。addclass('选项左')；//2.1 生成标签的样式var len=text . length//option . CSS(' width '，len * 15 'px '，' marginLeft '，350-len * 15-60 ' px ')选项。CSS(' width '，len * 15 ' px ')；option.css('marginLeft '，350-len * 15-60 ' px ')；//2.2 生成标签的内容option.html(文本);//3.将内容追加到挑选中$('#leftcontent ').追加（选项);//4.追加生成的标签（右侧)var选项1=$(' option/option ')；选项1。添加类('选项右')；option1.css('width '，len * 15 ' px ')；option1.css('marginLeft '，10 ' px ')；option1.html(文本);$('#rightcontent ').追加（选项1);//5.清除文本框的内容$('#leftText ').val(" ")；}函数sendRight(){ //1 .获取输入框中的内容var text=$('#rightText ').val()；//2.生成标签var option=$(' option/option ')；选项。addclass('选项左')；//2.1 生成标签的样式var len=text . length//option . CSS(' width '，len * 15 'px '，' marginLeft '，350-len * 15-60 ' px ')选项。CSS(' width '，len * 15 ' px ')；option.css('marginLeft '，350-len * 15-60 ' px ')；//2.2 生成标签的内容option.html(文本);//3.将内容追加到挑选中。

$('#rightcontent ').追加（选项);//4.追加生成的标签（右侧)var选项1=$(' option/option ')；选项1。添加类('选项右')；option1.css('width '，len * 15 ' px ')；option1.css('marginLeft '，10 ' px ')；option1.html(文本);$('#leftcontent ').追加（选项1);$(' #右文本').val(" ")；} $(文档)。keydown(函数(事件){ var txt 1=$(' #左文本')).val()；var txt2=$('#rightText ').val()if(事件。键码==13){ if(txt 1。trim()！=' '){ SendLeft()；} if(txt2.trim()！=' '){ SendRight()；} } });})/脚本/标题dydiv id=' main ' div id=' box ' div id=' top ' span你/span/div id=' content ' select multiple=' multiple ' id=' left content '/select/div id=' bottom ' input type=' text ' class=' sendText ' id=' left text '/input type=' button ' id=' left dbtn ' class=' sendBtn ' value='发送/div/div id=' box ' div id=' top ' span同桌/span/div id=' content ' select multiple=' multiple ' id=' right content '/select/div id=' bottom ' input type=' text ' class=' sendText ' id=' right text '/input type=' button ' id=' right BTN ' class=' sendBtn ' value='发送/div /div/div/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。