淘宝评论区案例

//css

<style type="text/css">

.znsArea {

755px;
overflow: hidden;
margin: 0 auto;
font-family: "Microsoft YaHei";

}

.takeComment {

713px;
display: block;
overflow: hidden;
border: #a5bcff solid 1px;
background: #f3f8fd;
margin-top: 25px;
font-family: Verdana;
padding: 15px 20px;

}

.takeTextField {
701px;
height: 70px;
border: #b1b1b1 solid 1px;
clear: both;
display: block;
margin: 10px 0 10px 0;
line-height: 20px;
padding: 5px;
box-shadow: inset 0 0 5px #DDD;
font-family: "Microsoft YaHei";
}

.takeSbmComment {
display: block;
overflow: hidden;
}

.inputs {
float: right;
125px;
height: 37px;
border: none 0;
background: tranparent;
background: #ccc;
cursor: pointer;
opacity: .8;
}

.commentOn {
753px;
display: block;
overflow: hidden;
border: #a5bcff solid 1px;
background: #f3f8fd;
margin-top: 25px;
font-family: Verdana;
}

.commentOn .messList {
overflow: hidden;
}

.messList .item {
overflow: hidden;
border-bottom: 1px solid #e5e5e5;
padding: 20px 0;
margin: 0 10px;
}
.item .info{
overflow: hidden;
}
.item .info .author {
overflow: hidden;
margin-bottom: .8em;
color: #999;
margin-top: 5px;
float: left;
}

.item .info img {
vertical-align: text-top;
}

.info .infoImg img {
40px;
height: 40px;
vertical-align: text-top;
margin-right:8px;
}

.info .vip img {
height: 20px;
}

.item .info time {
float: right;
}
.item p{
padding:0 40px;
}
.item p img{
height:20px;
cursor: pointer;
}
.item p.help{
float:right;
display: inline-block;
auto;
}
</style>

//html

<div class="znsArea">
<!--留言-->
　　<div class="takeComment">
　　　　<textarea name="textarea" class="takeTextField" id="tijiaoText" ng-model="inputText" value="df"></textarea>
　　　　<div class="takeSbmComment">
　　　　　　<input type="button" class="inputs" value="评论">
　　　　</div>
　　</div>
<!--已留-->
　　<div class="commentOn">
　　　　<ul class="messList"></ul>

　　</div>
</div>

//js

<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

window.onload = function() {

var send = $('.inputs')[0]; //评论按钮
var chatText = $('.takeTextField')[0]; //评论内容框
var chatList = $('.messList')[0]; //评论列表
document.onkeydown = function(e) {

e = e || window.event;
var code = e.which || e.keyCode;
//13 代表回车
if(e.ctrlKey && code == 13) {
sendMes();
}

}

send.onclick = function() {

sendMes();

};

function sendMes() {

//获取用户输入内容
var mes = chatText.value;
console.log(mes);
if(mes.length == 0) {

alert('不能为空');
return;

}
var time = new Date();
var year = time.getFullYear();
var mouth = time.getMonth() + 1;
var day = time.getDate();
$('.messList').prepend('<li class="item"><div class="info"><div class="author"><span class="infoImg"><img src="img/infoimg.jpg"/></span><span class="name">' + 'fjhdjfh' +'</span><span class="vip"><img src="img/1.png"/></span></div><time>'+ year + '年' + mouth + '月' + day + '日' +'</time></div><p><span><img src="img/key.png"/></span>'+ mes +'</p><p class="help"><span><img class="helpIMG" src="img/help.png"/></span><span class="add">'+ 0 +'</span></p></li>');
chatText.value = '';

}

var sum = 0;
$('.messList').on('click','li',function(e){

//debugger
var target = e.target || e.srcElement;
if(target.nodeName == 'IMG' && target.className == 'helpIMG'){

var sum = $(this).find('.add').text();
sum++;
$(this).find('.add').text(sum);

}

})

}

</script>