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

HTML5 imitation chat interface, circle of friends instance, 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: