仿腾讯微博效果，以面向对象的知识重构，该例子来源于 js实例索引 http://js.fgm.cc/learn/lesson6/02.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style type="text/css">
7 body,div,h2,h3,ul,li,p{margin:0;padding:0;}
8 a{text-decoration:none;}
9 a:hover{text-decoration:underline;}
10 ul{list-style-type:none;}
11 body{color:#333;background:#3c3a3b;font:12px/1.5 \5b8b\4f53;}
12 #msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}
13 #msgBox form h2{font-weight:400;font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;}
14 #msgBox form{background:url(file:///C|/Users/Mr.wei/Desktop/img/boxBG.jpg) repeat-x 0 bottom;padding:0 20px 15px;}
15 #userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff url(file:///C|/Users/Mr.wei/Desktop/img/inputBG.png) repeat-x;padding:3px 5px;font:14px/1.5 arial;}
16 #userName.active,#conBox.active{border:1px solid #7abb2c;}
17 #userName{height:20px;}
18 #conBox{width:448px;resize:none;height:65px;overflow:auto;}
19 #msgBox form div{position:relative;color:#999;margin-top:10px;}
20 #msgBox img{border-radius:3px;}
21 #face{position:absolute;top:0;left:172px;}
22 #face img{width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}
23 #face img.hover,#face img.current{width:28px;height:28px;border:1px solid #f60;opacity:1;filter:alpha(opacity=100);}
24 #sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(file:///C|/Users/Mr.wei/Desktop/img/btn.png) no-repeat;}
25 #sendBtn.hover{background-position:0 -30px;}
26 #msgBox form .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;}
27 #msgBox .list{padding:10px;}
28 #msgBox .list h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px solid #dee4e7;}
29 #msgBox .list h3 span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0 15px;}
30 #msgBox .list ul{overflow:hidden;zoom:1;}
31 #msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px dashed #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}
32 #msgBox .list ul li.hover{background:#f5f5f5;}
33 #msgBox .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px solid #ccc;border-radius:3px;}
34 #msgBox .list .content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}
35 #msgBox .list .userName{display:inline;padding-right:5px;}
36 #msgBox .list .userName a{color:#2b4a78;}
37 #msgBox .list .msgInfo{display:inline;word-wrap:break-word;}
38 #msgBox .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}
39 #msgBox .list .times span{float:left;}
40 #msgBox .list .times a{float:right;color:#889db6;1display:none;}
41 .tr{overflow:hidden;zoom:1;}
42 .tr p{float:right;line-height:30px;}
43 .tr *{float:left;}
44 </style>
45 </head>
46
47 <body>
48 <div id="msgBox">
49 <form>
50 <h2>来 , 说说你在做什么 , 想什么</h2>
51 <div>
52 <input id="userName" class="f-text" value="" />
53 <p id="face"><img src="file:///C|/Users/Mr.wei/Desktop/img/face1.gif" class="current" /><img src="file:///C|/Users/Mr.wei/Desktop/img/face2.gif" /><img src="file:///C|/Users/Mr.wei/Desktop/img/face3.gif" /><img src="file:///C|/Users/Mr.wei/Desktop/img/face4.gif" /><img src="file:///C|/Users/Mr.wei/Desktop/img/face5.gif" /><img src="file:///C|/Users/Mr.wei/Desktop/img/face6.gif" /><img src="file:///C|/Users/Mr.wei/Desktop/img/face7.gif" /><img src="file:///C|/Users/Mr.wei/Desktop/img/face8.gif" /></p>
54 </div>
55 <div><textarea id="conBox" class="f-text"></textarea></div>
56 <div class="tr">
57 <p>
58 <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>
59 <input id="sendBtn" type="button" value="" title="快捷键 Ctrl+Enter" />
60 </p>
61 </div>
62 </form>
63 <div class="list">
64 <h3><span>大家在说</span></h3>
65 <ul>
66 <li>
67 <div class="userPic"><img src="file:///C|/Users/Mr.wei/Desktop/img/face.gif" /></div>
68 <div class="content">
69 <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
70 <div class="msgInfo">新增删除广播功能。</div>
71 <div class="times"><span>07月05日 15:14</span><a class="del" href="javascript:;">删除</a></div>
72 </div>
73 </li>
74 <li>
75 <div class="userPic"><img src="file:///C|/Users/Mr.wei/Desktop/img/face.gif" /></div>
76 <div class="content">
77 <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
78 <div class="msgInfo">新增Ctrl+Enter快捷键发送广播。</div>
79 <div class="times"><span>07月05日 12:20</span><a class="del" href="javascript:;">删除</a></div>
80 </div>
81 </li>
82 <li>
83 <div class="userPic"><img src="file:///C|/Users/Mr.wei/Desktop/img/face.gif" /></div>
84 <div class="content">
85 <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
86 <div class="msgInfo">新增选择头像功能。</div>
87 <div class="times"><span>07月05日 12:08</span><a class="del" href="javascript:;">删除</a></div>
88 </div>
89 </li>
90 <li>
91 <div class="userPic"><img src="file:///C|/Users/Mr.wei/Desktop/img/face.gif" /></div>
92 <div class="content">
93 <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
94 <div class="msgInfo">增加了记录广播时间的功能。</div>
95 <div class="times"><span>07月04日 16:55</span><a class="del" href="javascript:;">删除</a></div>
96 </div>
97 </li>
98 <li>
99 <div class="userPic"><img src="file:///C|/Users/Mr.wei/Desktop/img/face.gif" /></div>
100 <div class="content">
101 <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
102 <div class="msgInfo">增加了输入字符检测功能，英文/半角为半个字符，汉字/全角为一个字符。</div>
103 <div class="times"><span>07月04日 08:30</span><a class="del" href="javascript:;">删除</a></div>
104 </div>
105 </li>
106 <li>
107 <div class="userPic"><img src="file:///C|/Users/Mr.wei/Desktop/img/face.gif" /></div>
108 <div class="content">
109 <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
110 <div class="msgInfo">仿腾讯微博效果，欢迎大家测试！</div>
111 <div class="times"><span>07月03日 20:19</span><a class="del" href="javascript:;">删除</a></div>
112 </div>
113 </li>
114 </ul>
115 </div>
116 </div>
117 <script>
118 var Weibo=function(){
119 var username=document.getElementById("userName"),
120 conbox=document.getElementById("conBox"),
121 maxnum=document.getElementsByClassName("maxNum")[0],
122 sendbtn=document.getElementById("sendBtn");
123 function Weibo(){
124 this.init();
125 }
126 Weibo.prototype={
127 init:function(){
128 sendbtn.addEventListener("click",Weibo.prototype.Eguangbo,false);
129 this.Echeckletter();
130 this.Egetphotos();
131 this.Eremove();
132 },
133 //检查是否为空
134 checkempty:function(){
135 if(!username.value){
136 alert("请输入用户名");
137 return false;}
138 if(username.value.length>19){
139 alert("用户名过长");
140 return false;
141 }
142 if(!conbox.value){
143 alert("请输入内容");
144 return false;}
145 if(conbox.value.length>140){
146 alert("您输入的内容过多！");
147 return false;}
148 return true;
149 },
150
151 //格式化时间函数
152 formattime:function(time){
153 return time.toString().replace(/^(\d)$/,"0$1");
154 },
155
156 //获取时间函数
157 gettime:function(){
158 var time=new Date(),
159 month=Weibo.prototype.formattime(time.getMonth());
160 date=Weibo.prototype.formattime(time.getDay());
161 hour=Weibo.prototype.formattime(time.getHours());
162 minute=Weibo.prototype.formattime(time.getMinutes());
163 return month+"月"+date+"日"+" "+hour+":"+minute;
164 },
165
166 //评论透明效果
167 changeopacity:function(obj,direction){
168 var obj=obj,
169 direct=direction;
170 if(direct=="down"){
171 if(!obj.style.opacity){
172 obj.style.opacity=0.0;
173 }
174 if(obj.style.opacity>=1.0){
175 clearTimeout(q);
176 obj.style.opacity=1.0;
177 return;}
178 obj.style.opacity=parseFloat(obj.style.opacity)+0.1;
179 }
180 if(direct=="up"){
181 if(!obj.style.opacity){
182 obj.style.opacity=1.0;
183 }
184 if(parseFloat(obj.style.opacity)<=0.2){
185 clearTimeout(q);
186 obj.style.opacity="0.0";
187 return;}
188 obj.style.opacity=parseFloat(obj.style.opacity)-0.1;
189 }
190 var q=setTimeout(function(){Weibo.prototype.changeopacity(obj,direct)},30)
191 },
192
193 //评论移动效果
194 changeheight:function(obj,direction,offsetheight){
195 var obj=obj,
196 heights=parseInt(obj.style.height),
197 offsetheight=offsetheight,
198 direct=direction;
199 if(direct=="down"){
200 if(!heights) heights=0;
201 if(heights>=(offsetheight-22)){
202 clearTimeout(t);
203 obj.style.height=offsetheight-22+"px";
204 return;
205 }
206 obj.style.height=heights+5+"px";}
207 if(direct=="up"){
208 if(heights!=heights) heights=offsetheight-22;
209 if(heights<=2){
210 clearTimeout(t);
211 obj.style.height="0px";
212 return;
213 }
214 obj.style.height=heights-5+"px";
215 }
216 var t=setTimeout(function(){Weibo.prototype.changeheight(obj,direct,offsetheight)},10);
217 },
218
219 //创建新的评论元素
220 createli:function(){
221 var ul=document.getElementsByTagName("ul")[0],
222 li=document.createElement("li"),
223 src=document.getElementsByClassName("current")[0].src,
224 name=username.value,
225 text=conbox.value,
226 time=Weibo.prototype.gettime(),
227 inner="<div class=\"userPic\"><img src=\"file:///C|/Users/Mr.wei/Desktop/img/face.gif\" /></div><div class=\"content\"><div class=\"userName\"><a href=\"javascript:;\">日丶久生情</a>:</div><div class=\"msgInfo\">仿腾讯微博效果，欢迎大家测试！</div><div class=\"times\"><span>07月03日 20:19</span><a class=\"del\" href=\"javascript:;\">删除</a></div></div>",
228 texts=inner.replace("file:///C|/Users/Mr.wei/Desktop/img/face.gif",src).replace("日丶久生情",name).replace("仿腾讯微博效果，欢迎大家测试！",text).replace("07月03日 20:19",time);
229 ul.insertBefore(li,ul.firstChild);
230 li.innerHTML=texts;
231 li.style.opacity=0;
232 var offsetheight=parseInt(li.offsetHeight);
233 Weibo.prototype.restore();
234 li.style.height="0px"
235 Weibo.prototype.changeheight(li,"down",offsetheight);
236 var r=setInterval(function(){
237 if(li.style.height==offsetheight-22+"px"){
238 clearInterval(r)
239 Weibo.prototype.Eremove();
240 Weibo.prototype.changeopacity(li,"down");
241 return;
242 }
243 },0)
244 },
245
246 //点击删除事件
247 Eremove:function(){
248 var removes=document.getElementsByClassName("del"),
249 lis=document.getElementsByTagName("li");
250 for(var i=0,len=removes.length;i<len;i++){
251 removes[i].index=i;
252 removes[i].onclick=function(){
253 offsetheight=parseInt(lis[this.index].offsetHeight);
254 Weibo.prototype.changeopacity(lis[this.index],"up");
255 var that=this;
256 var r=setInterval(function(){
257 if(lis[that.index].style.opacity==0){
258 clearInterval(r);
259 Weibo.prototype.changeheight(lis[that.index],"up",offsetheight);
260 }
261 },0)
262 var i=setInterval(function(){
263 if(lis[that.index].style.height=="0px"){
264 clearInterval(i);
265 var ul=document.getElementsByTagName("ul")[0];
266 ul.removeChild(lis[that.index])
267 Weibo.prototype.Eremove();
268 }
269 },0)
270 }
271 }
272 },
273 //头像获取事件
274 Egetphotos:function(){
275 var faces=document.getElementById("face").getElementsByTagName("img");
276 for(var i=0,len=faces.length;i<len;i++){
277 faces[i].onclick=function(){
278 for(var j=0;j<faces.length;j++){
279 faces[j].className="";}
280 this.className="current";
281 }
282 }
283 },
284 //输入检测
285 Echeckletter:function(){
286 conbox.onfocus=function(){
287 var t=setInterval(function(){
288 var len=140-conbox.value.toString().length;
289 var countTxt=document.getElementsByClassName("countTxt")[0];
290 if(len>=0){
291 countTxt.innerHTML="还能输入";
292 maxnum.innerHTML=len;
293 return;}
294 else{
295 countTxt.innerHTML="已经超出";
296 maxnum.innerHTML=(-len);}
297 },0)
298 conbox.onblur=function(){
299 clearInterval(t);
300 }
301 }
302 },
303 //广播点击后恢复
304 restore:function(){
305 username.value="";
306 conbox.value="";
307 conbox.focus();
308 setTimeout(function(){conbox.blur()},10);
309 },
310 //广播点击事件
311 Eguangbo:function(){
312 if(!Weibo.prototype.checkempty()) return;
313 Weibo.prototype.createli();
314 },
315
316 }
317 return Weibo;
318 }()
319 var wei=new Weibo();
320 </script>
321 </body>
322 </html>
时间： 2024-10-13 08:43:43