HTML5 imitation WeChat chat interface and WeChat Moments example code

In the past few days, I have used H5 to develop a WeChat-like chat front-end interface. Especially the bottom editor of WeChat is handled very well. It is developed using HTML5. Although the functions and effects are not as comprehensive as WeChat, it is still quite good. You can send messages, Emoticons and sent messages automatically scroll back to the bottom. In addition, you can have different right-click processing prompts for messages, pictures, and videos, as well as reward, screen occupying and other operations.

html code snippet:

 <!--BEGIN Reward--><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> <!-- //Tipping template area--> <div class=ws__popup-template> <h2 class=hdTit>Tip for your favorite programs</h2> <div class=item flexbox> <input class=ipt-txt align-l flex1 type=text name=dschooseProgram placeholder=Choose to tip Appreciation program readonly /> </div> <div class=item item-area> <textarea class=describe name=content placeholder=Enter a reward message, within 30 words (optional)></textarea> </div> <div class=item item-gift id=J__chooseGift> <div class=gift flexbox selected data-gift=001> <label class=txt><span>Luxury cars</span><em class=time>Dominate the screen for 50 seconds</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>Moving Rose</span><em class=time>Dominate the screen for 20 seconds</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;>Payment<span>￥<em class=moneyNum>12</em></span> Reward</a> </div> </div></div><!--END Reward-->

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.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)){ //Remove editor.focus(); range = window.getSelection().getRangeAt(0); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); document.execCommand(delete); }});//...The formatting editor contains tags 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);}

Operation effect:

The above is the HTML5 imitation WeChat chat interface and WeChat Moments example code introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!