评论区设计－仿CSDN

最新推荐文章于 2022-10-07 20:15:35 发布
最新推荐文章于 2022-10-07 20:15:35 发布
阅读量557 收藏 5
点赞数 2
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43615903/article/details/105663009
版权

项目中的效果展示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以及相关按钮点击鼠标移入移出的交互代码。

简化效果

在这里插入图片描述

人语西风
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿csdn，有积分、设置提问分、散分等功能
09-17
转载：BBSXP改成的CSDN论坛样式，参考CSDN论坛增加了积分、设置提问分、散分等功能
数字电子钟的设计与仿真-综合文档
05-22
《数字电子钟的设计与仿真》综合文档主要涵盖了数字电子钟的工作原理、设计方法以及相关软件的仿真技术。在现代电子技术中，数字电子钟作为日常生活和工业应用中的常见设备，其设计与仿真对于理解数字系统的基本工作...
【Vue】高仿CSDN的评论区功能，全手敲！
小李不背锅的博客
09-07 3188
2-2、点击评论图标的时候，触发一个方法，打开弹窗，并根据文章id请求后台评论，后端用Java对评论和回复进行封装返回 2-3、发表评论，将评论内容和用户id以及文章id发给后端保存，发表的时候，前端伪更新评论区，将新发表的评论push到comments里面，就不需要再次请求后端获取所有评论，除非用户主动刷新页面。 2-4、打开回复框，注意我们动态绑定了每条评论的openReply属性，每个回复框都是独立的，并不会相互影响，更新openReply属性不能简单地用this.comment[index].o
博客-web练习小项目
空的博客
06-12 170
为了练一下手，模仿csdn做了一个博客
Bootstrap仿制CSDN用户主页页面
张宜强的博客
10-07 1900
Bootstrap仿制CSDN用户主页页面
仿csdn三级评论功能实现以及数据库设计
liangmaxmin的博客
01-31 948
前期设计思想 ，首先要知道评论和评论是多对多关系，那麽必然就需要一个中间表来关联表和表之间的关系。 效果图: mysql数据库设计 --评论表 CREATE TABLE `c_comment` ( `cid` varchar(255) NOT NULL COMMENT '评论id', `bid` int(1) NOT NULL COMMENT '存储文章id', `id` varchar(255) NOT NULL COMMENT '评论人', `datetime` varchar(255
微信小程序课程设计-仿微信DEMO.zip
03-20
可根据个人的需求，进行一些修改，即可用于课程设计，毕业设计，项目实战等。 用微信开发者工具打开即可 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 使用教程 ...
微信小程序课程设计-高仿苹果计算器.zip
03-20
可根据个人的需求，进行一些修改，即可用于课程设计，毕业设计，项目实战等。 用微信开发者工具打开即可 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 使用教程 ...
微信小程序课程设计-仿找事吧.zip
03-20
可根据个人的需求，进行一些修改，即可用于课程设计，毕业设计，项目实战等。 用微信开发者工具打开即可 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 使用教程 ...
仿CSDN静态页面
11-16
【标题】"仿CSDN静态页面"是一个项目实践，旨在模仿知名编程社区CSDN的网站设计，创建一个静态的网页界面。这个项目对于学习前端开发，特别是HTML、CSS和JavaScript技术的人来说，是一个很好的练习。 【描述】提到...
完美实现仿QQ空间评论回复特效
09-03
主要介绍了完美实现仿QQ空间评论回复特效，非常的实用，附上实例代码给大家，有需要的小伙伴参考下吧。
仿CSDN博客的登录及注册部分
07-02
仿CSDN博客的登录和注册 用三层架构做的 功能基本都实现了，看着还行吧！
模仿CSDN通过点击来选择标签
01-25
模仿CSDN通过点击来选择标签 , 纯js实现。
评论回复功能数据表设计
热门推荐
sluckyboy的博客
08-02 1万+
CREATE TABLE `comment` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `topic_id` int(10) unsigned DEFAULT NULL COMMENT '主题id', `topic_type` tinyint(2) unsigned NOT NULL DEFAULT '1' COMMENT '1为
为个人博客添加文章评论功能
yums467的专栏
02-28 1万+
个人博客已经实现了文章的书写和显示功能，为了方便作者与阅读者的交流，我们要实现文章的评论功能。第一步：存储评论内容的数据库表的设计：对于数据库表结构的设计，我们要包含一下内容： 主键:id，自增，用来标识不同的评论,数据类型为INT。 外键1—article_id,用来标识评论是哪一篇文章的，数据类型为INT。 外键2—user_id,用来标识该评论是哪一位读者写的，数据类型为INT。 评论的内容：
机电伺服系统控制器设计-matlab仿真 csdn
最新发布
08-09
在CSDN上，有许多关于机电伺服系统控制器设计和MATLAB仿真的相关文章和教程。可以通过搜索相关关键词，找到适合自己的学习资源。 总结来说，机电伺服系统控制器设计是一个研究如何使用控制器实现对机电伺服系统的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值