Shulou(Shulou.com)06/03 Report--

This article is about how to use HTML5 imitation mobile Wechat chat interface, the editor feels very practical, so share with you to learn, I hope you can get something after reading this article, say no more, follow the editor to have a look.

What is brought to you is the HTML5 imitation mobile Wechat chat interface. The screenshot effect is as follows:

The source code is as follows:

XML/HTML Code copies content to the clipboard

HTML5 simulated Wechat chat interface / * * reset the default style of tags * / * {margin: 0; padding: 0; list-style: none; font-family: 'Microsoft Yahue'} # container {width: 450px; height: 780px Background: # eee; margin: 80px auto 0; position: relative; box-shadow: 20px 20px 55px # 777;} .header {background: # 000; height: 40px; color: # fff; line-height: 34px Font-size: 20px; padding: 0 10px;} .footer {width: 430px; height: 50px; background: # 666; position: absolute; bottom: 0; padding: 10px } .footer input {width: 275px; height: 45px; outline: none; font-size: 20px; text-indent: 10px; position: absolute; border-radius: 6px; right: 80px } .footer span {display: inline-block; width: 62px; height: 48px; background: # ccc; font-weight: 900; line-height: 45px; cursor: pointer; text-align: center; position: absolute Right: 10px; border-radius: 6px;} .footer span:hover {color: # fff; background: # 999;} # user_face_icon {display: inline-block; background: red; width: 60px Height: 60px; border-radius: 30px; position: absolute; bottom: 6px; left: 14px; cursor: pointer; overflow: hidden;} img {width: 60px; height: 60px } .content {font-size: 20px; width: 435px; height: 662px; overflow: auto; padding: 5px;} .content li {margin-top: 10px; padding-left: 10px; width: 412px Display: block; clear: both; overflow: hidden;} .content li img {float: left;} .content li span {background: # 7cfc00; padding: 10px; border-radius: 10px; float: left Margin: 6px 10px 0 10px; max-width: 310px; border: 1px solid # ccc; box-shadow: 0 3px # ccc;} .content li img.imgleft {float: left;} .content li img.imgright {float: right } .content li span.spanleft {float: left; background: # fff;} .content li span.spanright {float: right; background: # 7cfc00 } _ window.onload = function () {var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png']; var num = 0; / / Control avatar change var iNow =-1 / used to accumulate and change left and right floating var icon = document.getElementById ('user_face_icon'). GetElementsByTagName (' img'); var btn = document.getElementById ('btn'); var text = document.getElementById (' text'); var content = document.getElementsByTagName ('ul') [0]; var img = content.getElementsByTagName (' img') Var span = content.getElementsByTagName ('span'); icon [0] .onclick = function () {if (num==0) {this.src = arrIcon [1]; num= 1;} else if (num==1) {this.src = arrIcon [0] Num = 0;}} btn.onclick = function () {if (text.value = ='') {alert ('cannot send empty message') } else {content [XSS _ clean] + ='

'+ text.value+''; iNow++; if (num==0) {IMG [iNow] .className + =' imgright'; span [iNow] .className + = 'spanright';} else {img [iNow] .className + =' imgleft' Span [iNow] .className + = 'spanleft';} text.value ='; / / if there is too much content, place the scroll bar on the bottom contentcontent.scrollTop=content.scrollHeight } Amateur grass: simulated Wechat chat interface at 14:21

Sending the above is how to use the HTML5 imitation mobile Wechat chat interface. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.