• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5仿手机微信聊天界面

    给大家带来的是HTML5仿手机微信聊天界面，截图效果如下：

    源代码如下：

    XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>HTML5模拟微信聊天界面</title>  
    6.     <style>  
    7.   /**重置标签默认样式*/   
    8.         * {   
    9.             margin: 0;   
    10.             padding: 0;   
    11.             list-style: none;   
    12.             font-family: '微软雅黑'   
    13.         }   
    14.         #container {   
    15.             width: 450px;   
    16.             height: 780px;   
    17.             background: #eee;   
    18.             margin: 80px auto 0;   
    19.             position: relative;   
    20.             box-shadow: 20px 20px 55px #777;   
    21.         }   
    22.         .header {   
    23.             background: #000;   
    24.             height: 40px;   
    25.             color: #fff;   
    26.             line-height: 34px;   
    27.             font-size: 20px;   
    28.             padding: 0 10px;   
    29.         }   
    30.         .footer {   
    31.             width: 430px;   
    32.             height: 50px;   
    33.             background: #666;   
    34.             position: absolute;   
    35.             bottom: 0;   
    36.             padding: 10px;   
    37.         }   
    38.         .footer input {   
    39.             width: 275px;   
    40.             height: 45px;   
    41.             outline: none;   
    42.             font-size: 20px;   
    43.             text-indent: 10px;   
    44.             position: absolute;   
    45.             border-radius: 6px;   
    46.             right: 80px;   
    47.         }   
    48.         .footer span {   
    49.             display: inline-block;   
    50.             width: 62px;   
    51.             height: 48px;   
    52.             background: #ccc;   
    53.             font-weight: 900;   
    54.             line-height: 45px;   
    55.             cursor: pointer;   
    56.             text-align: center;   
    57.             position: absolute;   
    58.             right: 10px;   
    59.             border-radius: 6px;   
    60.         }   
    61.         .footer span:hover {   
    62.             color: #fff;   
    63.             background: #999;   
    64.         }   
    65.         #user_face_icon {   
    66.             display: inline-block;   
    67.             background: red;   
    68.             width: 60px;   
    69.             height: 60px;   
    70.             border-radius: 30px;   
    71.             position: absolute;   
    72.             bottom: 6px;   
    73.             left: 14px;   
    74.             cursor: pointer;   
    75.             overflow: hidden;   
    76.         }   
    77.         img {   
    78.             width: 60px;   
    79.             height: 60px;   
    80.         }   
    81.         .content {   
    82.             font-size: 20px;   
    83.             width: 435px;   
    84.             height: 662px;   
    85.             overflow: auto;   
    86.             padding: 5px;   
    87.         }   
    88.         .content li {   
    89.             margin-top: 10px;   
    90.             padding-left: 10px;   
    91.             width: 412px;   
    92.             display: block;   
    93.             clear: both;   
    94.             overflow: hidden;   
    95.         }   
    96.         .content li img {   
    97.             float: left;   
    98.         }   
    99.         .content li span{   
    100.             background: #7cfc00;   
    101.             padding: 10px;   
    102.             border-radius: 10px;   
    103.             float: left;   
    104.             margin: 6px 10px 0 10px;   
    105.             max-width: 310px;   
    106.             border: 1px solid #ccc;   
    107.             box-shadow: 0 0 3px #ccc;   
    108.         }   
    109.         .content li img.imgleft {    
    110.             float: left;    
    111.         }   
    112.         .content li img.imgright {    
    113.             float: right;    
    114.         }   
    115.         .content li span.spanleft {    
    116.             float: left;   
    117.             background: #fff;   
    118.         }   
    119.         .content li span.spanright {    
    120.             float: right;   
    121.             background: #7cfc00;   
    122.         }   
    123.     </style>  
    124.     <script>  
    125.         window.onload = function(){   
    126.             var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];   
    127.             var num = 0;     //控制头像改变   
    128.             var iNow = -1;    //用来累加改变左右浮动   
    129.             var icon = document.getElementById('user_face_icon').getElementsByTagName('img');   
    130.             var btn = document.getElementById('btn');   
    131.             var text = document.getElementById('text');   
    132.             var content = document.getElementsByTagName('ul')[0];   
    133.             var img = content.getElementsByTagName('img');   
    134.             var span = content.getElementsByTagName('span');   
    135.   
    136.             icon[0].onclick = function(){   
    137.                 if(num==0){   
    138.                     this.src = arrIcon[1];   
    139.                     num = 1;   
    140.                 }else if(num==1){   
    141.                     this.src = arrIcon[0];   
    142.                     num = 0;   
    143.                 }                   
    144.             }   
    145.             btn.onclick = function(){   
    146.                 if(text.value ==''){   
    147.                     alert('不能发送空消息');   
    148.                 }else {   
    149.                     content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';   
    150.                     iNow++;   
    151.                     if(num==0){   
    152.                         img[iNow].className += 'imgright';   
    153.                         span[iNow].className += 'spanright';   
    154.                     }else {   
    155.                         img[iNow].className += 'imgleft';   
    156.                         span[iNow].className += 'spanleft';   
    157.                     }   
    158.                     text.value = '';   
    159.      // 内容过多时,将滚动条放置到最底端   
    160.      contentcontent.scrollTop=content.scrollHeight;     
    161.                 }   
    162.             }   
    163.         }   
    164.     </script>  
    165. </head>  
    166. <body>  
    167.     <div id="container">  
    168.         <div class="header">  
    169.             <span style="float: left;">业余草:模拟微信聊天界面</span>  
    170.             <span style="float: right;">14:21</span>  
    171.         </div>  
    172.         <ul class="content">  
    173.    <!-- 欢迎加入qq群：454796847、135430763 -->  
    174.   </ul>  
    175.         <div class="footer">  
    176.             <div id="user_face_icon">  
    177.                 <img src="http://www.xttblog.com/icons/favicon.ico" alt="">  
    178.             </div>  
    179.             <input id="text" type="text" placeholder="说点什么吧...">  
    180.             <span id="btn">发送</span>  
    181.         </div>  
    182.     </div>  
    183. </body>  
    184. </html>  

    以上就是本文的全部内容，是不是很精彩，希望对大家的学习有所帮助。

    原文:http://www.xttblog.com/?p=265

    上一篇：HTML5使用Audio标签实现歌词同步的效果
    下一篇：HTML5 Canvas实现文本对齐的方法总结
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5仿手机微信聊天界面 HTML5,仿,手机,微信,聊天,