HTML5 imitation WeChat chat interface, WeChat circle of friends instance code, html5 circle of friends

Source: Internet
Author: User

HTML5 imitation chat interface, circle of friends instance code, html5 circle of friends

In the past few days, I have used H5 to develop a front-end interface for imitation chat, especially the part in the bottom Editor, which is well processed. It is developed using HTML5. Although the function is not so full, it is quite good, you can send messages, emotices, and automatically roll back the sent messages to the bottom. In addition, you can right-click messages, images, and videos and perform operations such as reward and screen capture.

Html code snippet:

<! -- In rewards --> <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"> <! -- // Reward template area --> <div class = "ws _ popup-template"> 

Javascript code snippet:

/* -- Chat editor area */var $ editor = $ (". J _ editorText "), editor = $ editor [0]; var $ face = $ (". emotion-area dd img "); $ face. on ("click", function (e) {if ($ (this ). hasClass ("face") {// image 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. getSelecti On & 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") {// Delete editor. focus (); range = window. getSelection (). getRangeAt (0); range. collapse (false); var sel = window. getSelection (); sel. removeAllRanges (); s El. addRange (range); document.exe cCommand ("delete ");}});//... the formatting editor contains the tag editor. addEventListener ("focus", function (evt) {surrounds ()}, true); editor. addEventListener ("input", function (evt) {surrounds () ;}, false); function surrounds () {setTimeout (function () {// chrome var 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"); // chrome sel. 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 );}//... scroll to the bottom of the chat Content function scrollToBottom () {$ ('. ws _ chatMsg-panel '). animate ({scrollTop: $ ("# J _ chatMsgList "). height ()}, 300 );}

Running effect:


The above is the HTML5 text-like chat interface and the sample code of the circle of friends. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.