HTML5仿手机微信聊天界面的具体分析

百变鹏仔 2个月前 (10-18) #H5教程
文章标签界面
这篇文章主要为大家详细介绍了html5仿手机微信聊天界面的关键代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
给大家带来的是HTML5仿手机微信聊天界面，截图效果如下：
源代码如下：
XML/HTML Code复制内容到剪贴板<!DOCTYPE html>  <html>  <head>      <meta charset="UTF-8">      <title>HTML5模拟微信聊天界面</title>      <style>    /**重置标签默认样式*/           * {               margin: 0;               padding: 0;               list-style: none;               font-family: &#39;微软雅黑&#39;           }           #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 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;           }       </style>      <script>          window.onload = function(){               var arrIcon = [&#39;http://www.xttblog.com/icons/favicon.ico&#39;,&#39;http://www.xttblog.com/wp-content/uploads/2016/03/123.png&#39;];               var num = 0;     //控制头像改变               var iNow = -1;    //用来累加改变左右浮动               var icon = document.getElementById(&#39;user_face_icon&#39;).getElementsByTagName(&#39;img&#39;);               var btn = document.getElementById(&#39;btn&#39;);               var text = document.getElementById(&#39;text&#39;);               var content = document.getElementsByTagName(&#39;ul&#39;)[0];               var img = content.getElementsByTagName(&#39;img&#39;);               var span = content.getElementsByTagName(&#39;span&#39;);                 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 ==&#39;&#39;){                       alert(&#39;不能发送空消息&#39;);                   }else {                       content.innerHTML += &#39;<li><img  src="&#39;+arrIcon[num]+&#39;" alt="HTML5仿手机微信聊天界面的具体分析" ><span>&#39;+text.value+&#39;</span></li>&#39;;                       iNow++;                       if(num==0){                           img[iNow].className += &#39;imgright&#39;;                           span[iNow].className += &#39;spanright&#39;;                       }else {                           img[iNow].className += &#39;imgleft&#39;;                           span[iNow].className += &#39;spanleft&#39;;                       }                       text.value = &#39;&#39;;        // 内容过多时,将滚动条放置到最底端        contentcontent.scrollTop=content.scrollHeight;                     }               }           }       </script>  </head>  <body>      <p id="container">          <p class="header">              <span style="float: left;">业余草:模拟微信聊天界面</span>              <span style="float: right;">14:21</span>          </p>          <ul class="content">     <!-- 欢迎加入qq群：454796847、135430763 -->    </ul>          <p class="footer">              <p id="user_face_icon">                  <img src="http://www.xttblog.com/icons/favicon.ico" alt="">              </p>              <input id="text" type="text" placeholder="说点什么吧...">              <span id="btn">发送</span>          </p>      </p>  </body>  </html>
文章推荐
HTML5仿手机微信聊天界面的具体分析

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集
