项目中的效果展示demo
一级评论
子评论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.comment-list-box{
font-family:sans-serif
}
.comment-list-box>.father-comment{
height:auto;
padding: 10px 0;
border-bottom: 1px dashed #c6c4c4;
}
.father-comment>.father-top-box{
position: relative;
height: 30px;
line-height: 30px;
}
.father-top-box>a>img{
height: 25px;
width: 25px;
display: inline-block;
vertical-align:middle;
border-radius: 50%;
margin-right: 5px;
}
.father-top-box>.reply_nickname{
font-size: 16px;
/*vertical-align: text-top;*/
}
.father-top-box>.comment_time{
font-size: 14px;
color: #ababab;
/*vertical-align:text-top;*/
margin-right: 10px;
}
.comment_txt{
margin: 5px 0 ;
color: #4d4d4d;
padding-left: 35px;
font-size: 14px;
/*vertical-align:text-top;*/
}
.father-top-box>.comment-tool-box{
position: absolute;
right: 0;
top: 0;
}
.comment-tool-box>.comment_oper{
float: right;
color: blue;
font-size: 12px;
cursor: pointer;
display: none;
margin-left: 10px;
}
.oper_hover{
display: none;
}
.comment-praise{
font-size: 14px;
float: right;
color: #4d4d4d;
margin-left: 20px;
}
.comment-praise>i{
margin-right: 3px;
}
.father-top-box>.notShow{
display: none;
}
.father-comment>.children-comment-box{
width: 95%;
margin-left: 35px;
padding-left: 5px;
border-left: 4px solid #adadad;
width: 98%;
box-sizing: border-box;
}
.notShow{
display: none;
}
.children-comment-box>.each-child-comment{
height: auto;
padding: 5px 0;
}
.each-child-comment>.reply-top{
height: 40px;
line-height: 40px;
position: relative;
}
.reply-top>.comment-tool-box{
right: 0;
position: absolute;
top: 0;
}
.reply-top>a>img{
width: 25px;
height: 25px;
border-radius: 50%;
vertical-align: middle;
}
.reply-top>.reply_nickname,.to_reply_nickname,.reply_txt{
font-size: 14px;
}
.reply-top>.reply_nickname{
font-weight: bold;
}
.reply-top>.reply_to{
margin-left: 3px;
margin-right: 3px;
color: #7a7a7a;
font-size: 14px;
}
.reply-top>.to_reply_nickname{
font-weight: bold;
color: #8b8b8b;
}
.reply-top>.reply_time{
font-size: 12px;
color: #919191;
margin-left: 20px;
}
.reply-top>.comment-tool-box>.reply_oper{
font-size: 12px;
float: right;
margin-top: 5px;
cursor: pointer;
color: blue;
margin-right: 5px;
display: none;
}
.reply-top>.comment-tool-box>.reply-praise{
font-size: 14px;
float: right;
margin-top: 5px;
color: #4d4d4d;
margin-left: 20px;
}
.reply-praise>i{
margin-right: 3px;
}
.reply-top::after{
display: block;
clear: both;
}
.each-child-comment>.reply-footer::before{
display: block;
clear: both;
}
.each-child-comment>.reply-footer{
margin-top: 5px;
font-size: 14px;
color: #4d4d4d;
word-break: break-all;
padding-left: 30px;
}
</style>
</head>
<body>
<div class="comment-list-box">
<div class="father-comment" id="curfather">
<div class="father-top-box">
<input type="hidden" class="replier" value="00author">
<input type="hidden" class="commentID" value="001">
<input type="hidden" class="top_commentID" value="null">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587485859403&di=11b1c6fe01c8de885e0cd38f5a3a8f66&imgtype=0&src=http%3A%2F%2Fimg13.360buyimg.com%2Fimgzone%2Fjfs%2Ft17329%2F100%2F2313568849%2F453017%2Feda05b5%2F5aefff4aN7fd2ce28.jpg" alt=""></a>
<a class="reply_nickname" href="">wall</a>
<span class="comment_time">2020/04/16 20:00:00</span>
<div class="comment-tool-box">
<span class="comment-praise"><i class="fa fa-hand-pointer-o"></i>2</span>
<span class="comment_oper check_reply" >查看回复</span>
<span class="comment_oper packup_reply " >收起回复</span>
<span class="comment_oper reply oper_hover">回复</span>
<span class="comment_oper report oper_hover" >举报</span>
</div>
</div>
<p class="comment_txt">相逢之日,永诀之时</p>
<div class="children-comment-box ">
<div class="each-child-comment">
<div class="reply-top">
<input type="hidden" class="replier" value="imok">
<input type="hidden" class="commentID" value="055">
<input type="hidden" class="top_commentID" value="001">
<a href=""> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3966967111,1476663336&fm=26&gp=0.jpg"></a>
<span class="reply_to">回复</span>
<a class="to_reply_nickname" href="">wall</a>
<span class="reply_time">2020/02/16 00:00:00</span>
<div class="comment-tool-box">
<span class="reply-praise"><i class="fa fa-hand-pointer-o"></i>2</span>
<span class="reply_oper reply">回复</span>
<span class="reply_oper report " >举报</span>
</div>
</div>
<p class="reply-footer">
你曾渴望去看,大江东去白浪滔天
我也曾想要,江南烟雨乌蓬小船
</p>
</div>
<div class="each-child-comment">
<div class="reply-top">
<input type="hidden" class="replier" value="imok">
<input type="hidden" class="commentID" value="055">
<input type="hidden" class="top_commentID" value="001">
<a href=""> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3966967111,1476663336&fm=26&gp=0.jpg"></a>
<span class="reply_to">回复</span>
<a class="to_reply_nickname" href="">wall</a>
<span class="reply_time">2020/02/16 00:00:00</span>
<div class="comment-tool-box">
<span class="reply-praise"><i class="fa fa-hand-pointer-o"></i>2</span>
<span class="reply_oper reply">回复</span>
<span class="reply_oper report " >举报</span>
</div>
</div>
<p class="reply-footer">
你曾渴望去看,大江东去白浪滔天
我也曾想要,江南烟雨乌蓬小船
</p>
</div>
<div class="each-child-comment">
<div class="reply-top">
<input type="hidden" class="replier" value="imok">
<input type="hidden" class="commentID" value="055">
<input type="hidden" class="top_commentID" value="001">
<a href=""> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3966967111,1476663336&fm=26&gp=0.jpg"></a>
<span class="reply_to">回复</span>
<a class="to_reply_nickname" href="">wall</a>
<span class="reply_time">2020/02/16 00:00:00</span>
<div class="comment-tool-box">
<span class="reply-praise"><i class="fa fa-hand-pointer-o"></i>2</span>
<span class="reply_oper reply">回复</span>
<span class="reply_oper report " >举报</span>
</div>
</div>
<p class="reply-footer">
你曾渴望去看,大江东去白浪滔天
我也曾想要,江南烟雨乌蓬小船
</p>
</div>
</div>
</div>
<div class="father-comment" id="curfather">
<div class="father-top-box">
<input type="hidden" class="replier" value="00author">
<input type="hidden" class="commentID" value="001">
<input type="hidden" class="top_commentID" value="null">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587485859403&di=11b1c6fe01c8de885e0cd38f5a3a8f66&imgtype=0&src=http%3A%2F%2Fimg13.360buyimg.com%2Fimgzone%2Fjfs%2Ft17329%2F100%2F2313568849%2F453017%2Feda05b5%2F5aefff4aN7fd2ce28.jpg" alt=""></a>
<a class="reply_nickname" href="">wall</a>
<span class="comment_time">2020/04/16 20:00:00</span>
<div class="comment-tool-box">
<span class="comment-praise"><i class="fa fa-hand-pointer-o"></i>2</span>
<span class="comment_oper check_reply" >查看回复</span>
<span class="comment_oper packup_reply " >收起回复</span>
<span class="comment_oper reply oper_hover">回复</span>
<span class="comment_oper report oper_hover" >举报</span>
</div>
</div>
<p class="comment_txt">相逢之日,永诀之时</p>
<div class="children-comment-box ">
<div class="each-child-comment">
<div class="reply-top">
<input type="hidden" class="replier" value="imok">
<input type="hidden" class="commentID" value="055">
<input type="hidden" class="top_commentID" value="001">
<a href=""> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3966967111,1476663336&fm=26&gp=0.jpg"></a>
<span class="reply_to">回复</span>
<a class="to_reply_nickname" href="">wall</a>
<span class="reply_time">2020/02/16 00:00:00</span>
<div class="comment-tool-box">
<span class="reply-praise"><i class="fa fa-hand-pointer-o"></i>2</span>
<span class="reply_oper reply">回复</span>
<span class="reply_oper report " >举报</span>
</div>
</div>
<p class="reply-footer">
你曾渴望去看,大江东去白浪滔天
我也曾想要,江南烟雨乌蓬小船
</p>
</div>
<div class="each-child-comment">
<div class="reply-top">
<input type="hidden" class="replier" value="imok">
<input type="hidden" class="commentID" value="055">
<input type="hidden" class="top_commentID" value="001">
<a href=""> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3966967111,1476663336&fm=26&gp=0.jpg"></a>
<span class="reply_to">回复</span>
<a class="to_reply_nickname" href="">wall</a>
<span class="reply_time">2020/02/16 00:00:00</span>
<div class="comment-tool-box">
<span class="reply-praise"><i class="fa fa-hand-pointer-o"></i>2</span>
<span class="reply_oper reply">回复</span>
<span class="reply_oper report " >举报</span>
</div>
</div>
<p class="reply-footer">
你曾渴望去看,大江东去白浪滔天
我也曾想要,江南烟雨乌蓬小船
</p>
</div>
<div class="each-child-comment">
<div class="reply-top">
<input type="hidden" class="replier" value="imok">
<input type="hidden" class="commentID" value="055">
<input type="hidden" class="top_commentID" value="001">
<a href=""> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3966967111,1476663336&fm=26&gp=0.jpg"></a>
<span class="reply_to">回复</span>
<a class="to_reply_nickname" href="">wall</a>
<span class="reply_time">2020/02/16 00:00:00</span>
<div class="comment-tool-box">
<span class="reply-praise"><i class="fa fa-hand-pointer-o"></i>2</span>
<span class="reply_oper reply">回复</span>
<span class="reply_oper report " >举报</span>
</div>
</div>
<p class="reply-footer">
你曾渴望去看,大江东去白浪滔天
我也曾想要,江南烟雨乌蓬小船
</p>
</div>
</div>
</div>
</div>
<script src="./js/jquery-3.4.1.min.js"></script>
<script>
$.each($(".reply_time"),function (val,index) {
var time = $(this).text().trim();
$(this).text(CaculateDiffTime(time));
})
$.each($(".comment_time"),function (val,index) {
var time = $(this).text().trim();
$(this).text(CaculateDiffTime(time));
})
function CaculateDiffTime(beginTime) {
beginTime = new Date(beginTime);
var nowtime = new Date();
var diff = (nowtime.getTime()-new Date(beginTime).getTime())/1000;
var result = null;
if(diff==0){
return "现在";
} else if(diff>0&&diff<60){
result = Math.floor(diff)+"秒前";
return result;
}else if(diff>=60&diff<3600){
result = Math.floor(diff/60)+"分钟前";
return result;
}else if(diff>=3600&& diff<3600*12){
result = Math.floor(diff/3600)+"小时前";
return result;
}else if(diff>=3600*12&&diff<3600*24){
return "半天前";
}else if(diff>=3600*24&& diff<3600*24*30) {
result = Math.floor(diff/24/3600) + "天前";
return result;
} else if(diff>=3600*24*30&& diff<3600*24*30*12){
result = Math.floor(diff/3600/24/30)+"月前";
return result;
}else {
result = nowtime.getFullYear()-beginTime.getFullYear() +"年前"
return result;
}
}
</script>
</body>
</html>
由于实际中业务还是比较复杂的,全放在这里看起来头大。。。。所以省略了很多和后台交互的js以及相关按钮点击鼠标移入移出的交互代码。