Antarmuka obrolan WeChat tiruan HTML5 dan kode contoh Momen WeChat

Dalam beberapa hari terakhir, saya telah menggunakan H5 untuk mengembangkan antarmuka front-end obrolan seperti WeChat. Terutama editor bawah WeChat ditangani dengan sangat baik. Ia dikembangkan menggunakan HTML5 , itu masih cukup bagus. Anda dapat mengirim pesan, Emotikon dan pesan terkirim secara otomatis menggulir kembali ke bawah. Selain itu, Anda dapat memiliki perintah pemrosesan klik kanan yang berbeda untuk pesan, gambar, dan video, serta hadiah, yang menempati layar. dan operasi lainnya.

cuplikan kode html:

 <!--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> <!-- //Memberi tip pada area template--> <div class=ws__popup-template> <h2 class=hdTit>Tip untuk program favorit Anda</h2> <div class=item flexbox> <input class=ipt-txt align-l flex1 type=text name=dschooseProgram placeholder=Pilih untuk memberi tip Program apresiasi hanya baca /> </div> <div class=item-area> <textarea class=describe name=content placeholder=Masukkan pesan hadiah, dalam 30 kata (opsional)></textarea> </div> <div class=item item-gift id=J__chooseGift> <div class=gift flexboxselected data-gift=001> <label class =txt><span>Mobil mewah</span><em class=time>Mendominasi layar selama 50 detik</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>Dominasi layar selama 20 detik</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=latar belakang: #ff4400; radius batas: 4px; warna: #fff;>Pembayaran<span>￥<em class=moneyNum>12</em></span> Hadiah</a> </div> </div></div><!--END Hadiah-->

Cuplikan kode Javascript:

 /* -Area editor obrolan*/var $editor = $(.J__editorText), editor = $editor[0];var $face = $(.emotion-area dd img);$face.on(klik, fungsi( e ){ if($(ini).hasClass(wajah)){ //Gambar var img = $(ini)[0].cloneNode(true); editor.focus(); rentang, simpul; if(document.selection && document.selection.createRange){ document.selection.createRange().pasteHTML(img); }else if(window.getSelection && window.getSelection().getRangeAt){ range = jendela .getSelection().getRangeAt(0); range.insertNode(img); range.collapse(false); window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } }, 16);else if($(this).hasClass(del)){ //Hapus rentang editor.focus(); = window.getSelection().getRangeAt(0); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); document.execCommand(delete }});//...Editor pemformatan berisi tag editor.addEventListener(focus, function(evt) { surrounds()} , benar);editor.addEventListener(masukan, fungsi(evt) { mengelilingi();}, salah);fungsi mengelilingi() { setTimeout(fungsi () { //chrome var sel = window.getSelection(); var jangkarNode = sel.anchorNode; jika (!anchorNode) kembali; jika (sel.anchorNode === editor || (sel.anchorNode.nodeType === 3 && sel. jangkarNode.parentNode === editor)) { var range = sel.getRangeAt(0); dokumen.createElement(p); range.surroundContents(p); range.selectNodeContents(p); range.insertNode(document.createElement(br)); //chrome sel.collapse(p, 0); { var elems = [].slice.call(editor.children); untuk (var i = 0, len = elems.length; i < len; i++) { var el = elems[i]; if (el.tagName.toLowerCase() == br) { editor.removeChild(el); } elems.length = 0; ;}//...Gulir ke bagian bawah fungsi konten obrolan scrollToBottom(){ $('.ws__chatMsg-panel').animate({scrollTop: $(#J__chatMsgList).height()}, 300);}

Efek operasi:

Di atas adalah antarmuka obrolan WeChat tiruan HTML5 dan kode contoh Momen WeChat yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!