1 <!DOCTYPE html>
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 <link href="css/demo1.css" rel="stylesheet" />
7 <script src="js/jquery-1.10.2.min.js"></script>
8 <script src="js/demo1.js"></script>
9 </head>
10 <body>
11 <div id="msgBox">
12 <form>
13 <h2>来，说说你在做什么，想什么</h2>
14 <div>
15 <input id="userName" class="f-text" value=""/>
16 <p id="face">
17 <img src="img/face1.gif" class="current"/>
18 <img src="img/face2.gif" />
19 <img src="img/face3.gif"/>
20 <img src="img/face4.gif"/>
21 <img src="img/face5.gif"/>
22 <img src="img/face6.gif"/>
23 <img src="img/face7.gif"/>
24 </p>
25 </div>
26 <div><textarea id="conBox" class="f-text"></textarea></div>
27 <div class="tr">
28 <p>
29 <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>
30 <input type="button" id="sendBtn" value="" title="快捷键 Ctrl+Enter"/>
31 </p>
32 </div>
33 </form>
34 <div class="list">
35 <h3><span>大家在说</span></h3>
36 <ul>
37 <!--<li>
38 <div class="userPic"><img src="img/face.gif"/></div>
39 <div class="content">
40 <div class="userName"><a href="javascript:;">永不上线</a>：</div>
41 <div class="msgInfo">新增删除广播功能。</div>
42 <div class="times"><span>07月05日 15:14</span><a class="del" href="javascript:;">删除</a></div>
43 </div>
44 </li>-->
45 </ul>
46 </div>
47 </div>
48 </body>
49 </html>
50
51
52
53
54 body,div,h2,h3,ul,li,p{
55 margin:0px;
56 padding:0px;
57 }
58 a{
59 text-decoration:none;
60 }
61 a:hover{
62 text-decoration:underline;
63 }
64 ul{
65 list-style-type:none;
66 }
67 body{
68 color:#333;
69 background:#a7ab8c;
70 font:12px/1.5 \5b8b\4f53;/*文字大小为12px，行高为1.5倍，\5b8b\4f53是宋体的意思，也可以直接写成“宋体”*/
71 }
72 #msgBox{
73 width:500px;
74 background:#fff;
75 border-radius:5px;
76 margin:10px auto;
77 padding-top:10px;
78 }
79 #msgBox form h2{
80 font-weight:400;
81 font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;
82 }
83 #msgBox form{
84 background:url(../img/boxBG.jpg) repeat-x 0 bottom;/*背景图片 沿水平方向重复 水平位置0 垂直位置底部*/
85 padding:0 20px 15px;/*上0，左右20，下15*/
86 }
87 #userName,#conBox{
88 color:#777;
89 border:1px solid #d0d0d0;
90 border-radius:6px;
91 background:#fff url(../img/inputBG.png) repeat-x;
92 padding:3px 5px;
93 font:14px/1.5 arial;
94 }
95 #userName {
96 height: 20px;
97 width:150px;
98 }
99
100 #conBox {
101 width: 448px;
102 resize: none;/*无法调整元素属性*/
103 height: 65px;
104 overflow: auto;/*滚动条*/
105 }
106
107 #msgBox form div {
108 position: relative;
109 color: #999;
110 margin-top: 10px;
111 }
112
113 #msgBox img {
114 border-radius: 3px;
115 }
116
117 #face {
118 position: absolute;
119 top: 0;
120 left: 172px;
121 width:300px;
122 }
123
124 #face img {
125 width: 30px;
126 height: 30px;
127 cursor: pointer;
128 margin-right: 6px;
129 opacity: 0.5;
130 filter: alpha(opacity=50);/*浏览器兼容*/
131 }
132
133 #face img.hover, #face img.current {
134 width: 28px;
135 height: 28px;
136 border: 1px solid #f60;
137 opacity: 1;
138 filter: alpha(opacity=100);
139 }
140
141 #sendBtn {
142 border: 0;
143 width: 112px;
144 height: 30px;
145 cursor: pointer;
146 margin-left: 10px;
147 background: url(../img/btn.png) no-repeat;
148 }
149
150 #sendBtn.hover {
151 background-position: 0 -30px;
152 }
153
154 #msgBox form .maxNum {
155 font: 26px/30px Georgia, Tahoma, Arial;
156 padding: 0 5px;
157 }
158
159 #msgBox .list {
160 padding: 10px;
161 }
162
163 #msgBox .list h3 {
164 position: relative;
165 height: 33px;
166 font-size: 14px;
167 font-weight: 400;
168 background: #e3eaec;
169 border: 1px solid #dee4e7;
170 }
171
172 #msgBox .list h3 span {
173 position: absolute;
174 left: 6px;
175 top: 6px;
176 background: #fff;
177 line-height: 28px;
178 display: inline-block;
179 padding: 0 15px;
180 }
181
182 #msgBox .list ul {
183 overflow: hidden;
184 zoom: 1;
185 }
186
187 #msgBox .list ul li {
188 float: left;
189 clear: both;
190 width: 100%;
191 border-bottom: 1px dashed #d8d8d8;
192 padding: 10px 0;
193 background: #fff;
194 overflow: hidden;
195 }
196
197 #msgBox .list ul li.hover {
198 background: #f5f5f5;
199 }
200
201 #msgBox .list .userPic {
202 float: left;
203 width: 50px;
204 height: 50px;
205 display: inline;
206 margin-left: 10px;
207 border: 1px solid #ccc;
208 border-radius: 3px;
209 }
210
211 #msgBox .list .content {
212 float: left;
213 width: 400px;
214 font-size: 14px;
215 margin-left: 10px;
216 font-family: arial;
217 word-wrap: break-word;
218 }
219
220 #msgBox .list .userName {
221 display: inline;
222 padding-right: 5px;
223 }
224
225 #msgBox .list .userName a {
226 color: #2b4a78;
227 }
228
229 #msgBox .list .msgInfo {
230 display: inline;
231 word-wrap: break-word;
232 }
233
234 #msgBox .list .times {
235 color: #889db6;
236 font: 12px/18px arial;
237 margin-top: 5px;
238 overflow: hidden;
239 zoom: 1;
240 }
241
242 #msgBox .list .times span {
243 float: left;
244 }
245
246 #msgBox .list .times a {
247 float: right;
248 color: #889db6;
249 display: none;
250 }
251
252 .tr {
253 overflow: hidden;
254 zoom: 1;
255 }
256
257 .tr p {
258 float: right;
259 line-height: 30px;
260 }
261
262 .tr * {
263 float: left;
264 }
265
266 #face img:hover {
267 opacity: 1;
268 }
269
270 .efont {
271 color: red;
272 }
273
274
275
276
277
278
279 /// <reference path="_references.js" />
280
281 var src = "img/face1.gif";
282 $(function () {
283 $("#sendBtn").click(function () {//当点击按钮之后
284 var username = $.trim($("#userName").val());//获取到输入的用户名
285 var con = $.trim($("#conBox").val());//获取到输入的内容
286 if (username == "") {
287 alert("请填写您的姓名");
288 return;
289 }
290 if ($("#conBox").val().length > 140) {
291 alert("输入内容超过了140个长度");
292 return;
293 }
294 if (con == "") {
295 alert("随便说点什么吧");
296 return;
297 }
298 var date = new Date();
299 var sDate = date.getMonth() + 1 + "月" + date.getDate() + "日" + date.getHours() + ":" + date.getMinutes();
300 var c = "<li><div class=\"userPic\"><img src=\"" + src + "\"></div>\
301 <div class=\"content\">\
302 <div class=\"userName\"><a href=\"javascript:;\">" + username + "</a>:</div>\
303 <div class=\"msgInfo\">" + con.replace(/<[^>]*>| /ig, "") + "</div>\
304 <div class=\"times\"><span>" + sDate + "</span><a class=\"del\" href=\"javascript:;\">删除</a></div>\
305 </div></li>";
306 $(".list ul").prepend($(c).hide().fadeIn(1000).bind("mouseover", function () {
307 $(this).find(".del").show().one("click", function () {
308 $(this).parent().parent().parent().remove();
309 });
310 $(this).addClass("hover");
311 }).bind("mouseout", function () { $(this).find(".del").hide(); $(this).removeClass("hover"); }));
312 });
313
314
315 $("#face img").click(function () {
316 src = $(this).attr("src");
317 $(this).css("opacity", 1);
318 });
319
320 $("#conBox").keyup(function () {//当在文本框里面输入内容的时候触发事件
321 var length = $("#conBox").val().length;//获取到输入内容的长度
322 var len = 140 - length;
323 if (len < 0) {
324 $(".countTxt").text("已超出");
325 len = Math.abs(len);
326 $(".maxNum").text(len).addClass("efont");
327 }
328 else {
329 $(".countTxt").text("还能输入");
330 $(".maxNum").text(len).removeClass("efont");
331 }
332 });
333 });
浙公网安备 33010602011771号