HTML5仿手机微信聊天界面_html5教程技巧

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

源代码如下：

XML/HTML Code复制内容到剪贴板

1. nbsp;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:21span>  
171.         div>  
172.         ul class="content">  
173.      
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