代碼如下：
dingguoqing
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-weight: bold;
font-size: 24px;
}
.box1{
width: 700px;
/*height: 1000px;*/
margin: 50px auto;
/*background: red;*/
}
.box2{
width: 100%;
height: 300px;
border: 2px solid #ccc;
border-radius: 5px;
}
.box3{
width: 100%;
height: 1000px;
border: 2px solid #ccc;
border-radius: 5px ;
position: relative;
}
.box4{
width: 100%;
height: 70px;
/*background: red;*/
/*text-align: center;*/
line-height: 70px;
color: orange;
}
.box5{
margin: 0 auto;
width: 95%;
height: 250px;
}
textarea{
width: 100%;
height: 140px;
border: 2px solid #ccc;
}
.box7{
width: 100%;
height: 90px;
/*background: blue;*/
line-height: 90px;
position: relative;
}
.c1{
padding-left:50px ;
}
.c2{
float: right;
padding-right:30px;
}
.box7 span{
padding-right:15px;
}
button{
color: #fff;
border: none;
background: orange;
border-radius: 5px;
width: 100px;
height: 50px;
position: absolute;
right: 0;
top: 20px;
}
.odiv{
width: 95%;
margin: 20px auto;
height: 140px;
border: 2px solid #ccc;
position: absolute;
}
a{
position: absolute;
right: 10px;
top: 10px;
}
p{
width: 100%;
/*word-wrap: break-word;*/
text-indent: 24px;
}
.p2{
font-size: 16px;
color: #C0C0C0;
}
.p1{
height: 90px;
overflow: auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box4">
<span class="c1">LOGO</span>
<span class="c2">點(diǎn)擊領(lǐng)取紅包</span>
</div>
<div class="box5">
<textarea maxlength="140"></textarea>
<!--//輸入數(shù)據(jù)-->
<div class="box7">
<span>表情</span>
<span>圖片</span>
<span>視頻</span>
<span>話(huà)題</span>
<span>文章</span>
<button>發(fā)布</button>
</div>
</div>
</div>
<div class="box3">
<!--//輸出數(shù)據(jù)到這里-->
</div>
</div>
</body>
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
//獲去焦點(diǎn)
$(function(){
var dsq;
// var box=document.getElementsByClassName("box3")[0];
$("textarea").on("focus",FocusEvent);
function FocusEvent(){
$("textarea").css({
"border": "4px solid blueviolet"
})
dsq=setInterval(function(){
//改變c2的值
var vleng=$("textarea").val().length;
if(vleng<=140){
$(".c2").html("還可以輸入"+(140-vleng)+"個(gè)字")
}else{
$(".c2").html("超過(guò)"+(vleng-140)+"個(gè)字,請(qǐng)修改")
}
},1)
}
var content = '';
$('textarea').on('blur', blurEvent);
var bb = false;
function blurEvent() {
clearInterval(dsq);
$(this).css({
"border": "2px solid #ccc",
})
content = $(this).val();//文本域里的val給拿出來(lái)
$(".c2").html("點(diǎn)擊領(lǐng)取紅包");
bb = true;
}
$("button").on('click',clickEvent);
function clickEvent(){
if ( content ) {
$('textarea').val(content)//文本域里的值拿到這里
}
var vleng=$("textarea").val().length;
if(vleng==0){
alert("不能為空")
}else if(vleng>140){
alert("不能超過(guò)140字")
}else{
var odiv=document.createElement("div");
$(".box3").prepend(odiv);
$(odiv).addClass("odiv");
$(odiv).html("<p>男神</p><p class='p1'>"+$("textarea").val()+"</p><p class='p2'></p><a>X</a>");
//創(chuàng)建一個(gè)div效果top為0;
var aaa = $(".odiv");
for (var i = 0; i < aaa.length; i++) {
$(odiv).eq(0).stop().animate({top:-290,left:"17"},1).siblings().eq(i-1).stop().animate({top:i*150,left:"17"},1)
}
$(odiv).eq(0).animate({top:"-320",left:"17"},500)//下來(lái)再上去
$(odiv).eq(0).animate({top:0,left:"17"},1000)//下來(lái)再上去
content = '';
$("textarea").val("");
var mydate = new Date();
var atr = mydate.getMonth()+1+"月";
atr += mydate.getDate()+"日";
atr += mydate.getHours()+'時(shí)發(fā)布';
$(".p2").html(atr);
//刪除
$("a").on("click",function(){
$(this).parent().remove();
for (var i = 0; i < aaa.length; i++) {
$(".odiv").eq(i).animate({top:i*150,left:"17"},1);
}
})
}
}
})
</script>
</html>
額......湊合看吧，效果圖在這兒
輸入文字點(diǎn)擊后這樣顯示
樣式部分沒(méi)過(guò)多的修飾，可以自己后期再加上去
中間有個(gè)過(guò)渡效果
結(jié)束！
