<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/demo1.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo1.js"></script>
</head>
<body>
<div id="msgBox">
<form>
<h2>来，说说你在做什么，想什么</h2>
<div>
<input id="userName" class="f-text" value=""/>
<p id="face">
<img src="img/face1.gif" class="current"/>
<img src="img/face2.gif" />
<img src="img/face3.gif"/>
<img src="img/face4.gif"/>
<img src="img/face5.gif"/>
<img src="img/face6.gif"/>
<img src="img/face7.gif"/>
</p>
</div>
<div><textarea id="conBox" class="f-text"></textarea></div>
<div class="tr">
<p>
<span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>
<input type="button" id="sendBtn" value="" title="快捷键 Ctrl+Enter"/>
</p>
</div>
</form>
<div class="list">
<h3><span>大家在说</span></h3>
<ul>
<!--<li>
<div class="userPic"><img src="img/face.gif"/></div>
<div class="content">
<div class="userName"><a href="javascript:;">永不上线</a>：</div>
<div class="msgInfo">新增删除广播功能。</div>
<div class="times"><span>07月05日 15:14</span><a class="del" href="javascript:;">删除</a></div>
</div>
</li>-->
</ul>
</div>
</div>
</body>
</html> body,div,h2,h3,ul,li,p{
margin:0px;
padding:0px;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
ul{
list-style-type:none;
}
body{
color:#333;
background:#a7ab8c;
font:12px/1.5 \5b8b\4f53;/*文字大小为12px，行高为1.5倍，\5b8b\4f53是宋体的意思，也可以直接写成“宋体”*/
}
#msgBox{
width:500px;
background:#fff;
border-radius:5px;
margin:10px auto;
padding-top:10px;
}
#msgBox form h2{
font-weight:400;
font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;
}
#msgBox form{
background:url(../img/boxBG.jpg) repeat-x 0 bottom;/*背景图片 沿水平方向重复 水平位置0 垂直位置底部*/
padding:0 20px 15px;/*上0，左右20，下15*/
}
#userName,#conBox{
color:#777;
border:1px solid #d0d0d0;
border-radius:6px;
background:#fff url(../img/inputBG.png) repeat-x;
padding:3px 5px;
font:14px/1.5 arial;
}
#userName {
height: 20px;
width:150px;
} #conBox {
width: 448px;
resize: none;/*无法调整元素属性*/
height: 65px;
overflow: auto;/*滚动条*/
} #msgBox form div {
position: relative;
color: #999;
margin-top: 10px;
} #msgBox img {
border-radius: 3px;
} #face {
position: absolute;
top: 0;
left: 172px;
width:300px;
} #face img {
width: 30px;
height: 30px;
cursor: pointer;
margin-right: 6px;
opacity: 0.5;
filter: alpha(opacity=50);/*浏览器兼容*/
} #face img.hover, #face img.current {
width: 28px;
height: 28px;
border: 1px solid #f60;
opacity: 1;
filter: alpha(opacity=100);
} #sendBtn {
border: 0;
width: 112px;
height: 30px;
cursor: pointer;
margin-left: 10px;
background: url(../img/btn.png) no-repeat;
} #sendBtn.hover {
background-position: 0 -30px;
} #msgBox form .maxNum {
font: 26px/30px Georgia, Tahoma, Arial;
padding: 0 5px;
} #msgBox .list {
padding: 10px;
} #msgBox .list h3 {
position: relative;
height: 33px;
font-size: 14px;
font-weight: 400;
background: #e3eaec;
border: 1px solid #dee4e7;
} #msgBox .list h3 span {
position: absolute;
left: 6px;
top: 6px;
background: #fff;
line-height: 28px;
display: inline-block;
padding: 0 15px;
} #msgBox .list ul {
overflow: hidden;
zoom: 1;
} #msgBox .list ul li {
float: left;
clear: both;
width: 100%;
border-bottom: 1px dashed #d8d8d8;
padding: 10px 0;
background: #fff;
overflow: hidden;
} #msgBox .list ul li.hover {
background: #f5f5f5;
} #msgBox .list .userPic {
float: left;
width: 50px;
height: 50px;
display: inline;
margin-left: 10px;
border: 1px solid #ccc;
border-radius: 3px;
} #msgBox .list .content {
float: left;
width: 400px;
font-size: 14px;
margin-left: 10px;
font-family: arial;
word-wrap: break-word;
} #msgBox .list .userName {
display: inline;
padding-right: 5px;
} #msgBox .list .userName a {
color: #2b4a78;
} #msgBox .list .msgInfo {
display: inline;
word-wrap: break-word;
} #msgBox .list .times {
color: #889db6;
font: 12px/18px arial;
margin-top: 5px;
overflow: hidden;
zoom: 1;
} #msgBox .list .times span {
float: left;
} #msgBox .list .times a {
float: right;
color: #889db6;
display: none;
} .tr {
overflow: hidden;
zoom: 1;
} .tr p {
float: right;
line-height: 30px;
} .tr * {
float: left;
} #face img:hover {
opacity: 1;
} .efont {
color: red;
} /// <reference path="_references.js" /> var src = "img/face1.gif";
$(function () {
$("#sendBtn").click(function () {//当点击按钮之后
var username = $.trim($("#userName").val());//获取到输入的用户名
var con = $.trim($("#conBox").val());//获取到输入的内容
if (username == "") {
alert("请填写您的姓名");
return;
}
if ($("#conBox").val().length > 140) {
alert("输入内容超过了140个长度");
return;
}
if (con == "") {
alert("随便说点什么吧");
return;
}
var date = new Date();
var sDate = date.getMonth() + 1 + "月" + date.getDate() + "日" + date.getHours() + ":" + date.getMinutes();
var c = "<li><div class=\"userPic\"><img src=\"" + src + "\"></div>\
<div class=\"content\">\
<div class=\"userName\"><a href=\"javascript:;\">" + username + "</a>:</div>\
<div class=\"msgInfo\">" + con.replace(/<[^>]*>| /ig, "") + "</div>\
<div class=\"times\"><span>" + sDate + "</span><a class=\"del\" href=\"javascript:;\">删除</a></div>\
</div></li>";
$(".list ul").prepend($(c).hide().fadeIn(1000).bind("mouseover", function () {
$(this).find(".del").show().one("click", function () {
$(this).parent().parent().parent().remove();
});
$(this).addClass("hover");
}).bind("mouseout", function () { $(this).find(".del").hide(); $(this).removeClass("hover"); }));
}); $("#face img").click(function () {
src = $(this).attr("src");
$(this).css("opacity", 1);
}); $("#conBox").keyup(function () {//当在文本框里面输入内容的时候触发事件
var length = $("#conBox").val().length;//获取到输入内容的长度
var len = 140 - length;
if (len < 0) {
$(".countTxt").text("已超出");
len = Math.abs(len);
$(".maxNum").text(len).addClass("efont");
}
else {
$(".countTxt").text("还能输入");
$(".maxNum").text(len).removeClass("efont");
}
});
});