博客列表 >评论功能练习

评论功能练习

雷国恩的博客
雷国恩的博客原创
2019年04月04日 11:48:19692浏览

<!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 type="text/javascript" src="static/jquery-3.3.1.min.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 type="text/javascript">

  $(function(){

     $('.comment').on('keyup',function(){

      var len=$(this).val().length;

      $(this).parents('.text-box').find('.length').text(140-len);

      })

     $(document).on('click','.btn',function(){

      var val=$(this).prev().val();

        if(val==''){

          alert('你还没有输入内容'); 

         }else{

          var date=new Date();

          var y=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.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>'+val+'你说的都对……</p><p class="comment-time">'+y+'<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>' ;


           $(this).parents('.box').find('.comment-list').append(html)

           //清空输入框

           $(this).parents('.box').find('.comment').val("")

           //初始化输入字数

           $(this).parents('.box').find('.length').text("0")

           $(this).prev().height(20);

          }

          

     })


     $(document).on('click','.comment-operate',function(){

        if(confirm('确定删除么')){

            $(this).parents('.comment-box').remove();

        }

     })


     $(document).on('click','.comment',function(){

        $(this).height(80);

     })


     $(document).on('click','.comment-praise',function(){

        var num=parseInt($(this).attr('total'))+1;

        $(this).attr('total',num);

        $(this).html(num+'赞');

     })


     $(document).on('click','.close',function(){

        if(confirm('确定删除么')){

             $(this).parents('.clearfix').remove();

        }

       

     })

  })

</script>

    

</body>

</html>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议