代码如下：
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">点击领取红包</span>
</div>
<div class="box5">
<textarea maxlength="140"></textarea>
<!--//输入数据-->
<div class="box7">
<span>表情</span>
<span>图片</span>
<span>视频</span>
<span>话题</span>
<span>文章</span>
<button>发布</button>
</div>
</div>
</div>
<div class="box3">
<!--//输出数据到这里-->
</div>
</div>
</body>
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
//获去焦点
$(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)+"个字")
}else{
$(".c2").html("超过"+(vleng-140)+"个字,请修改")
}
},1)
}
var content = '';
$('textarea').on('blur', blurEvent);
var bb = false;
function blurEvent() {
clearInterval(dsq);
$(this).css({
"border": "2px solid #ccc",
})
content = $(this).val();//文本域里的val给拿出来
$(".c2").html("点击领取红包");
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("不能超过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>");
//创建一个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)//下来再上去
$(odiv).eq(0).animate({top:0,left:"17"},1000)//下来再上去
content = '';
$("textarea").val("");
var mydate = new Date();
var atr = mydate.getMonth()+1+"月";
atr += mydate.getDate()+"日";
atr += mydate.getHours()+'时发布';
$(".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>
额......凑合看吧，效果图在这儿
输入文字点击后这样显示
样式部分没过多的修饰，可以自己后期再加上去
中间有个过渡效果
结束！
网友评论