仿微信聊天面板制作 javascript

先上图吧

仿微信聊天面板制作 javascript仿微信聊天面板制作 javascript

点击头像更换说话对象,简单说下实现原理,html中创建一个ul用于存放所有说话的内容,对话内容是有javascript 动态生成,

主要难点:先布局好css,当时奥巴马发送时候,让这个li有浮动,当是小胖时候,让这个li左浮动。

代码:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>模拟短信发送</title>
  6     <style>
  7         * {
  8             margin: 0;
  9             padding: 0;
 10             list-style: none;
 11             font-family: ‘微软雅黑‘
 12         }
 13         #container {
 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: 34px;
 24             color: #fff;
 25             line-height: 34px;
 26             font-size: 20px;
 27             padding: 0 10px;
 28         }
 29         .footer {
 30             width: 430px;
 31             height: 50px;
 32             background: #666;
 33             position: absolute;
 34             bottom: 0;
 35             padding: 10px;
 36         }
 37         .footer input {
 38             width: 275px;
 39             height: 45px;
 40             outline: none;
 41             font-size: 20px;
 42             text-indent: 10px;
 43             position: absolute;
 44             border-radius: 6px;
 45             right: 80px;
 46         }
 47         .footer span {
 48             display: inline-block;
 49             width: 62px;
 50             height: 48px;
 51             background: #ccc;
 52             font-weight: 900;
 53             line-height: 45px;
 54             cursor: pointer;
 55             text-align: center;
 56             position: absolute;
 57             right: 10px;
 58             border-radius: 6px;
 59         }
 60         .footer span:hover {
 61             color: #fff;
 62             background: #999;
 63         }
 64         #icon {
 65             display: inline-block;
 66             background: red;
 67             width: 60px;
 68             height: 60px;
 69             border-radius: 30px;
 70             position: absolute;
 71             bottom: 6px;
 72             left: 14px;
 73             cursor: pointer;
 74             overflow: hidden;
 75         }
 76         img {
 77             width: 60px;
 78             height: 60px;
 79         }
 80         .content {
 81             font-size: 20px;
 82             width: 435px;
 83             height: 662px;
 84             overflow: auto;
 85             padding: 5px;
 86         }
 87         .content li {
 88             margin-top: 10px;
 89             padding-left: 10px;
 90             width: 412px;
 91             display: block;
 92             clear: both;
 93             overflow: hidden;
 94         }
 95         .content li img {
 96             float: left;
 97         }
 98         .content li span{
 99             background: #7cfc00;
100             padding: 10px;
101             border-radius: 10px;
102             float: left;
103             margin: 6px 10px 0 10px;
104             max-width: 310px;
105             border: 1px solid #ccc;
106             box-shadow: 0 0 3px #ccc;
107         }
108         .content li img.imgleft { 
109             float: left; 
110         }
111         .content li img.imgright { 
112             float: right; 
113         }
114         .content li span.spanleft { 
115             float: left;
116             background: #fff;
117         }
118         .content li span.spanright { 
119             float: right;
120             background: #7cfc00;
121         }
122     </style>
123     <script>
124         window.onload = function(){
125             var arrIcon = [img/1.jpg,img/2.jpg];
126             var num = 0;     //控制头像改变
127             var iNow = -1;    //用来累加改变左右浮动
128             var icon = document.getElementById(icon).getElementsByTagName(img);
129             var btn = document.getElementById(btn);
130             var text = document.getElementById(text);
131             var content = document.getElementsByTagName(ul)[0];
132             var img = content.getElementsByTagName(img);
133             var span = content.getElementsByTagName(span);
134 
135             icon[0].onclick = function(){
136                 if(num==0){
137                     this.src = arrIcon[1];
138                     num = 1;
139                 }else if(num==1){
140                     this.src = arrIcon[0];
141                     num = 0;
142                 }                
143             }
144             btn.onclick = function(){
145                 if(text.value ==‘‘){
146                     alert(发送内容不能为空);
147                 }else {
148                     content.innerHTML += <li><img src="+arrIcon[num]+"><span>+text.value+</span></li>;
149                     iNow++;
150                     if(num==0){
151                         img[iNow].className += imgright;
152                         span[iNow].className += spanright;
153                     }else {
154                         img[iNow].className += imgleft;
155                         span[iNow].className += spanleft;
156                     }
157                     text.value = ‘‘;
158                 }
159             }
160         }
161     </script>
162 </head>
163 <body>
164     <div id="container">
165         <div class="header">
166             <span style="float: left;">白超华-博客园</span>
167             <span style="float: right;">20:30</span>
168         </div>
169         <ul class="content"></ul>
170         <div class="footer">
171             <div id="icon">
172                 <img src="img/1.jpg" alt="">
173             </div>
174             <input id="text" type="text" placeholder="说点什么吧...">
175             <span id="btn">发送</span>
176         </div>
177     </div>
178 </body>
179 </html>

 

仿微信聊天面板制作 javascript

上一篇:微信小程序一步一步获取UnionID,实现自动登录


下一篇:iOS之微信支付