search

Home >Web Front-end >H5 Tutorial >HTML5 imitation mobile WeChat chat interface_html5 tutorial skills

HTML5 imitation mobile WeChat chat interface_html5 tutorial skills

WBOY
WBOYOriginal
2016-05-16 15:51:583102browse

What I bring to you is the HTML5 imitation mobile WeChat chat interface. The screenshot effect is as follows:

The source code is as follows:

XML/HTML CodeCopy content to clipboard
  1. >
  2. <html>
  3. <head>
  4.  <meta charset="UTF- 8"> 
  5.  <title>HTML5 simulated WeChat chat interfacetitle>
  6. <style>
  7. /**Reset label default style*/
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. list-style: none;
  12. font-family: 'Microsoft Yahei'
  13.                                                               
    14.                                                              
  14. width: 450px;
  15. height: 780px;
  16. background: #eee;
  17. margin: 80px auto 0;
  18. position: relative;
  19. box-shadow: 20px 20px 55px #777;
  20.                                                               
    21. .header {
    22. background: #000;
    23. height: 40px;
    24. color: #fff;
    25. line-height: 34px;
    26. font-size: 20px;
    27. padding: 0 10px;
    28. }  
  28.         .footer {   
  29.             width: 430px;   
  30.             height: 50px;   
  31.             background: #666;   
  32.             position: absolute;   
  33.             bottom: 0;   
  34.             padding: 10px;   
  35.         }   
  36.         .footer input {   
  37.             width: 275px;   
  38.             height: 45px;   
  39.             outline: none;   
  40.             font-size: 20px;   
  41.             text-indent: 10px;   
  42.             position: absolute;   
  43.             border-radius: 6px;   
  44.             right: 80px;   
  45.         }   
  46.         .footer span {   
  47.             display: inline-block;   
  48.             width: 62px;   
  49.             height: 48px;   
  50.             background: #ccc;   
  51.             font-weight: 900;   
  52.             line-height: 45px;   
  53.             cursor: pointer;   
  54.             text-align: center;   
  55.             position: absolute;   
  56.             right: 10px;   
  57.             border-radius: 6px;   
  58.         }   
  59.         .footer span:hover {   
  60.             color: #fff;   
  61.             background: #999;   
  62.         }  
  63.         #user_face_icon {   
  64.             display: inline-block;   
  65.             background: red;   
  66.             width: 60px;   
  67.             height: 60px;   
  68.             border-radius: 30px;   
  69.             position: absolute;   
  70.             bottom: 6px;   
  71.             left: 14px;   
  72.             cursor: pointer;   
  73.             overflow: hidden;   
  74.         }   
  75.         img {   
  76.             width: 60px;   
  77.             height: 60px;   
  78.         }   
  79.         .content {   
  80.             font-size: 20px;   
  81.             width: 435px;   
  82.             height: 662px;   
  83.             overflow: auto;   
  84.             padding: 5px;   
  85.         }   
  86.         .content li {   
  87.             margin-top: 10px;   
  88.             padding-left: 10px;   
  89.             width: 412px;   
  90.             display: block;   
  91.             clear: both;   
  92.             overflow: hidden;   
  93.         }   
  94.         .content li img {   
  95.             float: left;   
  96.         }  
  97.         .content li span{   
  98.             background: #7cfc00;   
  99.             padding: 10px;   
  100.             border-radius: 10px;   
  101.             float: left;   
  102.             margin: 6px 10px 0 10px;   
  103.             max-width: 310px;   
  104.             border: 1px solid #ccc;   
  105.             box-shadow: 0 0 3px #ccc;   
  106.         }   
  107.         .content li img.imgleft {    
  108.             float: left;    
  109.         }   
  110.         .content li img.imgright {    
  111.             float: right;    
  112.         }   
  113.         .content li span.spanleft {    
  114.             float: left;   
  115.             background: #fff;   
  116.         }   
  117.         .content li span.spanright {    
  118.             float: right;   
  119.             background: #7cfc00;   
  120.         }
  121.  style> 
  122. <script>
  123. window.onload = function(){
  124. var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com /wp-content/uploads/2016/03/123.png'];
  125. var num = 0; //Control avatar change
  126. var iNow = -1; //Used to accumulate and change left and right floats
  127. var icon = document.getElementById('user_face_icon').getElementsByTagName('img');
  128. var btn = document.getElementById('btn');
  129. var text = document.getElementById('text');
  130. var content = document.getElementsByTagName('ul')[0];
  131. var img = content.getElementsByTagName('img');
  132. var span = content.getElementsByTagName('span');
  134. icon[0].onclick = function(){
  135. if(num==0){
  136.  this.src = arrIcon[1];
  137.  num = 1;
  138. }else if(num==1){
  139.  this.src = arrIcon[0];
  140.  num = 0;
  141.                                                                                               
    142.                                                            
    143. btn.onclick
  143. = function(){ if(
    144. text.value
  144. ==''){ alert('Cannot send empty message');
  145.                                                                                         
    146. content.innerHTML = '
  146. <
    147. li
  147. ><img src="' arrIcon[num] '"><span>' text.value 'span>li>'; iNow ;
    148. if(
  148. num
    149. ==0){
  149. img[iNow].className = 'imgright';
    150.       span[iNow].className = 'spanright';
  150.                                                                                                          
    151. img[iNow].className = 'imgleft';
    152. span[iNow].className = 'spanleft';
    153.                                              
  153.  text.value = '';
  154. // When there is too much content, place the scroll bar to the bottom
  155. contentcontent.scrollTop=content.scrollHeight;
  156.                                                                      
    157.                                                            
  157. }
  158. script>
  159. head>
  160. <body>
  161.  <div id="container" >
  162.  <div class="header" >
  163.  <span style=" float: left;">Amateur grass: simulated WeChat chat interfacespan>
  164.  <span style=" float: right;">14:21span>
  165. div>
  166.  <ul class="content" >
  168. ul>
  169.  <div class="footer" >
  170.  <div id="user_face_icon" >
  171.  <img src="http: //www.xttblog.com/icons/favicon.ico" alt="">
  172. div>
  173.  <input id="text" type="text" placeholder="Say something...">
  174.  <span id="btn" >Sendspan>
  175. div>
  176.  div> 
  177. body>
  178. html>

The above is the entire content of this article. Isn’t it exciting? I hope it will be helpful to everyone’s study.

Original text:http://www.xttblog.com/?p=265

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5 uses the Audio tag to achieve the effect of lyrics synchronization _html5 tutorial skillsNext article：HTML5 uses the Audio tag to achieve the effect of lyrics synchronization _html5 tutorial skills

Related articles

See more