![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 });