jquery添加div实现消息聊天框

上代码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
* {margin: 0;padding: 0;
}.border {margin-left: 300px;width: 900px;background-color: white;position: relative;border: 1px solid rgb(221, 221, 221);
}.border .border-next {background-color: #dcad50;position: relative;height: 23px;line-height: 40px;display: flex;padding: 10px 60px 10px 80px;
}.border-next .people {background-color: #dcad50;font-size: 20px;color: black;font-family: 楷体;margin-left: 300px;
}.border .border-second {background-color: white;margin-left: 0px;width: 700px;height: 530px;flex: 1;flex-direction: column;overflow-y: auto;border-right: 1px solid rgb(221, 221, 221);border-bottom: 1px solid rgb(221, 221, 221);
}.border .border-img {background-color: white;margin-left: 0px;width: 700px;height: 30px;border-right: 1px solid rgb(221, 221, 221);border-bottom: 1px solid rgb(221, 221, 221);
}.border-bottom {display: flex;width: 700px;height: 120px;background-color: white;overflow: auto;font-size: 20px;border-style: solid;border-color: #FFFFFF;border-right: 1px solid rgb(221, 221, 221);
}.button {display: flex;margin-left: 530px;
}.button .shut {background-color: white;width: 70px;height: 30px;font-size: 20px;text-align: center;border: 1px solid rgb(221, 221, 221);
}.button .send {background-color: white;margin-left: 15px;width: 70px;height: 30px;font-size: 20px;text-align: center;border: 1px solid rgb(221, 221, 221);background-color: #DBAC50;
}.replyChat {display:flex;width: 150px;background: #12B7F5;border-radius: 5px;/* 圆角 */position: relative;margin-left: 500px;align-content: center;margin-bottom: 30px;
}.sendChat {display:flex;width: 150px;background: #E5E5E5;border-radius: 5px;/* 圆角 */position: relative;margin-left: 50px;align-content: center;margin-bottom: 30px;border-color: white white white #E5E5E5;
}.sendChat span {display: inline-block;margin-left: 10px;line-height: 35px;
}.replyChat span {display: inline-block;margin-left: 10px;line-height: 35px;
}.sendChat .arrows {position: absolute;top: 5px;left: -16px;/* 圆角的位置需要细心调试哦 */width: 0;height: 0;font-size: 0;border: solid 8px;border-color: white #E5E5E5 white white;
}.replyChat .arrow {position: absolute;top: 5px;right: -16px;/* 圆角的位置需要细心调试哦 */width: 0;height: 0;font-size: 0;border: solid 8px;border-color: white white white #12B7F5;
}.chatTouXiang {width: 50px;height: 50px;border-radius: 50%; background-repeat: no-repeat;background-size: cover;background-position: center;background-image: url(img/tou.png);
}
.chatCnt{}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>聊天助手</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script>window.onload=function(){$(".arrow").hide();$(".arrows").hide();}document.onkeydown = function(e) {if (e.keyCode == 13 && e.ctrlKey) {// 这里实现换行document.getElementById("sendContent").value += "\n";} else if (e.keyCode == 13) {// 避免回车键换行e.preventDefault();// 下面写你的发送消息的代码f();}}function f() {var cnt = $("#sendContent").val();if(cnt == '')alert('内容不能为空');   if(cnt != ''){var node = document.createElement('div');node.className = 'sendChat';var span = document.createElement('span');span.innerHTML = cnt;var arrow = document.createElement('div');arrow.className = 'arrows';node.appendChild(span);node.appendChild(arrow);$(".border-second").append($(node));$("#sendContent").val('');$.ajax({data : cnt,type : "post",url : "CharServlet?id=" + cnt,dataType : "json",success : function(msg) {var node = document.createElement('div');node.className = 'replyChat';var span = document.createElement('span');span.innerHTML = msg.text;var arrow = document.createElement('div');arrow.className = 'arrow';node.appendChild(arrow);node.appendChild(span);$(".border-second").append($(node));var boderSecondDiv = $('.border-second');var lastChild = boderSecondDiv[0].lastChild;var lastChildH = lastChild.offsetTop;var h = 0;for (var i = 0, len = lastChild.children.length; i < len; i++) {h += lastChild.children[i].offsetHeight;}boderSecondDiv[0].scrollTop = lastChildH + h;},error : function(msg) {alert("请求失败");}});}}
</script>
</head><div class="frame"><div class="border"><div class="border-next"><div class="people">聊天助手</div></div><div class="border-second"><div class="chatCnt"><div class="chatTouXiang"></div>  <div class="sendChat"><span></span><div class="arrows"></div></div></div><div class="replyChat"><span></span><div class="arrow"></div></div><br></div><div class="border-img"></div><textarea id="sendContent" class="border-bottom"></textarea><div class="button"><button class="shut">关闭</button><button id="selectBtn" class="send" onclick="f()">发送</button></div></div>
</div>
</body>
</html>

jquery添加div实现消息聊天框相关推荐

android：手搓一个即时消息聊天框（包含消息记录）
先看一下效果 1.后端要实现这个,先说一下后端要实现的接口 1.创建会话id 传入"发送id"和"接收id"给服务端,服务端去创建"会话id&quo ...
jQuery基本操作--制作QQ简易聊天框
需求: 训练要点 1 .使用 html( ) 获取和设置页面内容 2 .使用 val( ) 获取聊天内容 3 .使用 addClass( ) 为指定元素追加样式 4 .使用数组保存聊天人员头像和昵称 ...
短消息聊天框html模板,短信、私信、微信等聊天对话的文本消息生成器AE模板
这款文本消息生成器并不适合新手AEer学习,仅推荐给中级以上的AEer研究学习压缩包内包含了一个时长5分多钟的视频教程,必须先行观看完毕后再开始学习视频教程讲述了在开始工作前,必须先安装好&quo ...
html模拟聊天框实现，仅用html，css，js实现
html模拟聊天框一共分为两大部分,一部分是登录,一部分是聊天框内容聊天框登录(比较简陋,可以美化哈) 聊天框登录代码(内含登录的js,html) <!DOCTYPE html> < ...
弹性布局flex！！之精美聊天框案例（舔狗日记）！！
霸道总裁之得不到则毁掉! 该案例大量使用flex布局,提高自己flex布局的熟练度,本人运用VScode进行开发. 你做完次案例将学到运用CSS绘画三角形. flex布局: justify-cont ...
div alert html,基于jQuery的弹出消息插件 DivAlert之旅（一）
想着自己学习Javascript,以及Ajax.jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来 ...
jQuery实现消息提示框
创建一个消息提示方法 /*** 弹出消息提示框,采用浏览器布局,位于整个页面中央,默认显示3秒* 后面的消息会覆盖原来的消息* @param message:待显示的消息* @param type:消 ...
《微信小程序案例8》实现聊天框下部分别人向我发消息
一.先安装node.js 如若安装时出现磁盘无效的报错信息,以下解决方法 1.win+r 输入subst Y: %TEMP% 2.再次win+r 输入subst Y:/Y Y代表报错时出现的 ...
HTML如何编写类似QQ聊天框,jQuery实现简易QQ聊天框
本文实例为大家分享了jQuery实现简易QQ聊天框的具体代码,供大家参考,具体内容如下例子1 *{list-style: none;margin: 0;padding: 0;} .box1{ wid ...

jquery添加div实现消息聊天框

jquery添加div实现消息聊天框相关推荐

最新文章

热门文章