//css
<style type="text/css">
.znsArea {
width: 755px;
overflow: hidden;
margin: 0 auto;
font-family: "Microsoft YaHei";
}
.takeComment {
width: 713px;
display: block;
overflow: hidden;
border: #a5bcff solid 1px;
background: #f3f8fd;
margin-top: 25px;
font-family: Verdana;
padding: 15px 20px;
}
.takeTextField {
width: 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;
width: 125px;
height: 37px;
border: none 0;
background: tranparent;
background: #ccc;
cursor: pointer;
opacity: .8;
}
.commentOn {
width: 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 {
width: 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;
width: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>