收藏
批改状态：未批改
老师批语：
在页面内可以进行说说的评论、删除、点赞，还可以对说说进行点赞和删除操作
<!DOCTYPE html>
<html>
<head>
<title>评论功能练习</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="static/images/logo.png">
<link rel="stylesheet" type="text/css" href="static/style.css">
<script src="../jquery-3.3.1.js"></script>
</head>
<body>
<div id="list">
<div class="box clearfix">
<!-- 删除说说按钮 close-->
<a class="close" href="javascript:;">×</a>
<img class="head" src="static/images/1.png" alt="">
<div class="content">
<div class="main">
<p class="txt">
<span class="user">西门大官人: </span>
~ All the luck is for you. ~
</p>
<img class="pic" src="static/images/img1.jpg" alt="">
</div>
<div class="info clearfix">
<span class="time">02-14 23:01</span>
<!-- 给说说点赞 praise -->
<a class="praise" href="javascript:;">赞</a>
</div>
<div class="praises-total" total="4" style="display: block;">4个人觉得很赞</div>
<!--评论内容-->
<div class="comment-list">
<!-- 每次评论要添加的内容跟标签 -->
<div class="comment-box clearfix" user="self">
<img class="myhead" src="static/images/4.jpg" alt="">
<div class="comment-content">
<p class="comment-text"><span class="user">我:</span>你说的都对……</p>
<p class="comment-time">
2019-01-19 14:36
<a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1赞</a>
<a href="javascript:;" class="comment-operate">删除</a>
</p>
</div>
</div>
<!--添加结束-->
</div>
<!--评论内容结束-->
<div class="text-box">
<textarea class="comment" placeholder="评论…"></textarea>
<button class="btn">回 复</button>
<span class="word"><span class="length">0</span>/140</span>
</div>
</div>
</div>
<div class="box clearfix">
<a class="close" href="javascript:;">×</a>
<img class="head" src="static/images/2.jpg" alt=""/>
<div class="content">
<div class="main">
<p class="txt">
<span class="user">欧阳克 : </span>三亚的海滩很漂亮。
</p>
<img class="pic" src="static/images/img5.jpg" alt=""/>
</div>
<div class="info clearfix">
<span class="time">02-14 23:01</span>
<a class="praise" href="javascript:;">赞</a>
</div>
<div class="praises-total" total="0" style="display: none;"></div>
<div class="comment-list">
<div class="comment-box clearfix" user="other">
<img class="myhead" src="static/images/3.png" alt="">
<div class="comment-content">
<p class="comment-text"><span class="user">韦小宝：</span>我也想去三亚。</p>
<p class="comment-time">
2019-01-19 14:36
<a href="javascript:;" class="comment-praise" total="0" my="0">赞</a>
<a href="javascript:;" class="comment-operate">删除</a>
</p>
</div>
</div>
</div>
<div class="text-box">
<textarea class="comment" placeholder="评论…"></textarea>
<button class="btn">回 复</button>
<span class="word"><span class="length">0</span>/140</span>
</div>
</div>
</div>
</div>
<script>
$(function(){
//当单击评论时，输入框高度增加
$('.comment').click(function(){
$(this).height(80)
})
/*失去焦点时又恢复原样(不想评论)
$('.comment').blur(function(){
$(this).height(20)
})*/
//评论开始后，随着内容的输入，下面的提示也更新
$('.comment').on('keyup',function(){
//计算出内容的长度
var leng = $(this).val().trim().length
//计算出剩余能输出的字数,并显示
$(this).parent().find('.length').text(140-leng)
})
//点击回复按钮，评论成功后，把评论的内容显示在上面的评论框，输入框内容清零；失败后有提示失败原因，评论框需显示评论的时间
$(document).on('click','.btn',function(){
//获取输入框的内容
var text_content = $(this).prev().val().trim()
//评论不能为空，需要对输入框的内容进行判断
if(text_content==''){
alert('评论内容不能为空')
}else{
//获取评论时间
var timer = new Date()
var timer_content = timer.getFullYear()+'-'+(timer.getMonth()+1)+'-'+timer.getDate()+' '+timer.getHours()+':'+timer.getMinutes()+':'+timer.getSeconds()
//获取每次评论要添加的内容跟标签,将上面获取的内容和时间替换掉
var html = '<div class="comment-box clearfix" user="self"><img class="myhead" src="static/images/4.jpg" alt=""><div class="comment-content"><p class="comment-text"><span class="user">我:</span>'+text_content+'</p><p class="comment-time">'+timer_content+'<a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1赞</a><a href="javascript:;" class="comment-operate">删除</a></p></div></div>'
//将上面获取的html添加到对应的div里
$(this).parents('.content').find('.comment-list').append(html)
//清空输入框样式、内容及字数提示
$(this).prev().height(20)
$(this).prev().val('')
$(this).parent().find('.length').text('0')
}
})
//删除说说
$(document).on('click','.close',function(){
if(confirm('确定删除此说说吗？'))
$(this).parent().remove()
})
//给说说点赞
$(document).on('click','.praise',function(){
$(this).css({'background':'url("static/images/bg3.jpg") no-repeat left top','color':'red'})
})
//给评论点赞
var num = 1
$(document).on('click','.comment-praise',function(){
num += 1
$(this).text(num+'赞')
$(this).css({'background':'url("static/images/bg3.jpg") no-repeat left top','color':'red'})
})
//删除评论
$(document).on('click','.comment-operate',function(){
if(confirm('确定删除此评论吗？'))
$(this).parents('.comment-box').remove()
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
在案例代码里面有详细的注释，这里说一下被注释的一个功能
/*失去焦点时又恢复原样(不想评论)
$('.comment').blur(function(){
$(this).height(20)
})*/这个功能本来打算实现当用户点了输入区，但是有突然不想评论，就恢复输入框的原本样式
但是发现好像与点击回复按钮事件有冲突，因为点击回复按钮，输入区也失去了焦点，就实现不了评论的功能，所以就注释了这个功能
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
