这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息、表情,发送的消息自动回滚定位到底部,另外可以对消息、图片、视频有不同的右键处理提示,还有打赏、占屏等操作。

html代码片段:

<!--BEGIN 打赏-->
<div class="js_dialog" id="J_Dialog_dashang" style="display: none;"><!--<div class="weui-mask"></div>--><div class="weui-dialog"><i class="weui-xclose"></i><div class="weui-dialog__bd"><!-- //打赏模板区--><div class="ws__popup-template"><h2 class="hdTit">为喜欢的节目打赏</h2><div class="item flexbox"><input class="ipt-txt align-l flex1" type="text" name="dschooseProgram" placeholder="选择打赏节目" readonly /></div><div class="item item-area"><textarea class="describe" name="content" placeholder="输入打赏语,30字以内(选填)"></textarea></div><div class="item item-gift" id="J__chooseGift"><div class="gift flexbox selected" data-gift="001"><label class="txt"><span>豪车</span><em class="time">霸屏50秒</em></label><span class="amount">¥<em>12</em> <i class="chkbox"></i></span></div><div class="gift flexbox" data-gift="002"><label class="txt"><span>动人玫瑰</span><em class="time">霸屏20秒</em></label><span class="amount">¥<em>8</em> <i class="chkbox"></i></span></div></div></div></div><div class="weui-dialog__ft"><a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" style="background: #ff4400; border-radius: 4px; color: #fff;">支付 <span>¥<em class="moneyNum">12</em></span> 打赏</a></div></div>
</div>
<!--END 打赏-->

Javascript代码片段:

/* ——聊天编辑器区域 */
var $editor = $(".J__editorText"), editor = $editor[0];
var $face = $(".emotion-area dd img");
$face.on("click", function(e){if($(this).hasClass("face")){ //图像var img = $(this)[0].cloneNode(true);editor.focus();setTimeout(function(){var range, node;if(document.selection && document.selection.createRange){document.selection.createRange().pasteHTML(img);}else if(window.getSelection && window.getSelection().getRangeAt){range = window.getSelection().getRangeAt(0);range.insertNode(img);range.collapse(false);var sel = window.getSelection();sel.removeAllRanges();sel.addRange(range);}}, 16);}else if($(this).hasClass("del")){ //删除
        editor.focus();range = window.getSelection().getRangeAt(0);range.collapse(false);var sel = window.getSelection();sel.removeAllRanges();sel.addRange(range);document.execCommand("delete");}
});//...格式化编辑器包含标签
editor.addEventListener("focus", function(evt) {surrounds()
}, true);
editor.addEventListener("input", function(evt) {surrounds();
}, false);
function surrounds() {setTimeout(function () { //chromevar sel = window.getSelection();var anchorNode = sel.anchorNode;if (!anchorNode) return;if (sel.anchorNode === editor ||(sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === editor)) {var range = sel.getRangeAt(0);var p = document.createElement("p");range.surroundContents(p);range.selectNodeContents(p);range.insertNode(document.createElement("br")); //chromesel.collapse(p, 0);(function clearBr() {var elems = [].slice.call(editor.children);for (var i = 0, len = elems.length; i < len; i++) {var el = elems[i];if (el.tagName.toLowerCase() == "br") {editor.removeChild(el);}}elems.length = 0;})();}}, 0);
}//...滚动到聊天内容底部
function scrollToBottom(){$('.ws__chatMsg-panel').animate({scrollTop: $("#J__chatMsgList").height()}, 300);
}

运行效果:

转载于:https://www.cnblogs.com/xiaoyan2017/p/8370908.html

HTML5仿微信聊天界面、微信朋友圈实例相关推荐

  1. uni-app 关于微信小程序分享,app微信聊天界面和朋友圈分享

    前端小白的uni-app艰难学习之路 微信小程序分享 实现微信小程序分享和app内微信分享 小程序分享很简单,我们通过button的open-type属性 <!-- #ifdef MP-WEIX ...

  2. php 仿微信朋友圈,HTML5仿微信聊天界面和朋友圈代码

    这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...

  3. html5仿发送说说,适合发朋友圈可爱又有趣的说说 朋友圈必备秒赞文案

    1. 盐于律己甜以待人 2. 太阳能维修月亮可更换星星不闪包退款 3. 下次绕过人间 4. 你如果爱着生活,生活一定比谁都清楚. 5. 公主殿下的任务呢就是天天开心 6. 我抓住夏天的尾巴啦 7. 在 ...

  4. h5聊天页面 jquery_HTML5仿微信聊天界面、微信朋友圈实例代码

    这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...

  5. uniapp可以封装组件嘛_uniapp聊天App实例|vue+uniapp仿微信界面|红包|朋友圈

    一.功能阐述 今天给大家分享的是基于UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消 ...

  6. (仿微信Android)IM聊天+抢红包+直播+朋友圈源码发布了

    (仿微信Android)IM聊天+抢红包+直播+朋友圈源码发布了 功能概览: IM聊天 单聊/群聊/聊天室--基于环信sdk 红包功能: 1.一对一红包 2.群红包(抢红包.答题红包.专属红包) 3. ...

  7. html5仿网页版微信聊天界面代码

    2019独角兽企业重金招聘Python工程师标准>>> html5仿网页版微信聊天界面代码 转载于:https://my.oschina.net/u/1266171/blog/783 ...

  8. HTML5仿手机微信聊天界面

    HTML5仿手机微信聊天界面,截图效果如下: 源代码如下: <!DOCTYPE html> <html> <head><meta charset=" ...

  9. html5 仿手机聊天,HTML5仿手机微信聊天界面

    html> HTML5模拟微信聊天界面 /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; font-family: '微软雅黑 ...

  10. jquery 背景特效实现_html5实现的仿网页版微信聊天界面效果源码

    码农那点事儿 关注我们,一起学习进步 这是一款基于html5实现的仿网页版微信聊天界面效果源码,可实现微信网页版聊天界面效果,在编辑框编辑文字之后按Ctrl+Enter键即可提交文字到聊天对话框上.整 ...

最新文章

  1. 「SAP技术」SAP MM MB5M报表不显示特殊库存数据
  2. [Mongodb]删除指定字段
  3. flink介绍:有界流和无界流
  4. Spring Boot 动态数据源(Spring 注解数据源)
  5. HDU - 4497 GCD and LCM
  6. 【接口技术】8086的IN和OUT指令
  7. Linux的实际操作:用户管理(删除用户userdel userdel -r)
  8. 线程安全的map_面试必问-几种线程安全的Map解析
  9. leetCode----day01---- 从排序数组中删除重复项
  10. 私藏几十款程序员必备效率工具:一次性都给你了!
  11. Web浏览器测试,怎么提取测试点 - web测试方法总结
  12. 美团iOS逆向工程分析
  13. 安全学习木马查杀打卡第二十一天
  14. python qt是什么_初识Python与Qt
  15. java拆分日期_java实现日期拆分的方法
  16. 怎么清理ug10注册表_最专业的软件卸载利器:不仅可卸载顽固软件,还能清理软件残留和注册表垃圾...
  17. python中计算梯度值
  18. matlab 矩阵维度必须一致,错误使用 /
  19. Ubuntu 22.04下载安装VMware Workstation Pro 17
  20. php 随机获取字母,深入PHP获取随机数字和字母的方法详解

热门文章

  1. 上海交大开源训练框架,支持大规模基于种群多智能体强化学习训练
  2. SAP WM LT15不能取消二步法确认场景中只做过第一步确认的TO单
  3. 演讲实录丨清华大学朱小燕教授:对话系统现状与展望
  4. 如果神经网络规模足够大,会产生智能吗?
  5. 人工智能和机器学习技术推动企业发展
  6. 如何通过交货单把B库存发出
  7. 一张贴纸骗过AI识别?对抗性机器学习是什么东西?
  8. 干货丨从起源到具体算法,这是一份适合所有人读的深度学习综述论文
  9. 《数学之美》第26章 维特比和他的维特比算法
  10. linux写命令时方便的快捷键以及Vim必备命令