<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {margin: 0;padding: 0;}
.box{
border: 1px solid #000;
600px;
height: auto;
margin:100px auto;
padding:30px 0;
}
textarea{
450px;
resize:none;
margin-left: 20px;
}
ul li{
450px;
list-style: none;
border-bottom: 1px dotted #ccc;
margin-left:20px;
line-height: 30px;
color: #333;
}
ul li a{
float: right;
font-size: 12px;
}
.zan-number{
color:blue;
}
</style>
</head>
<body>
<div class="box" id="box">
消息发布：</br><textarea cols="30" rows="10"></textarea>
<button>发布</button>
<input type="button" value="取消" class="quxiao">
<input type="button" value="赞"class="zan">
<span class="zan-number">0</span>
</div>
</body>
<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('.box').append('<ul></ul>');
$('button').click(function(){
if($('textarea').val()==''){
console.log('内容不可以为空');
return;
}
$('ul').append('<li>'+$('textarea').val()+'<a href="javascript:;">删除</a></li>');
$('textarea').val('');
$('li').each(function(){
$('li a').click(function(){
$(this).parent().remove();
});
});
});
$('textarea').keydown(function(e){
if(e.keyCode==13){
$('ul').append('<li>'+$('textarea').val()+'<a href="javascript:;">删除</a></li>');
$('textarea').val('');
$('li').each(function(){
$('li a').click(function(){
$(this).parent().remove();
});
});
};
});
$('.quxiao').click(function(){
if($('textarea').val()==''){
alert('输入的内容不能为空');
return;
}else{
alert('你确定要取消吗');
$('textarea').val('');
}
});
var zanvalue=0;
$('.zan').click(function(){
$('.zan-number').text(zanvalue);
})
zanvalue+=1;
$('.zan').dblclick(function(){
$('.zan-number').text('0');
})
})
</script>
</html>