说说输入点赞删除功能——2019年1月23日 - 作业

Home > List of blog posts > 说说输入点赞删除功能——2019年1月23日
Blogger Information
Blog 11
fans 0
comment 0
visits 6634
Special Recommendation
More>
Related recommendations
实例

<!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="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        body { font-size: 12px; line-height: 120%; text-align: center; color:#333; padding: 20px;}
        a { color: #333; text-decoration: none;}
        a:hover { text-decoration: underline;}
        * { margin: 0; padding: 0; border: none;}
        .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden}
        .clearfix { *height:1%;}
        #list { margin: 0 auto; text-align: left; width: 540px;}
        .box { border-top: 1px solid #eee; position: relative;  width: 540px; padding: 20px 0}
        .box:hover .close { display: block;}
        .close { display: none; top:0px; right: 0px; width: 28px; height: 28px; border: 1px solid #eee; position: absolute; background: #f2f4f7; line-height: 27px; text-align: center;}
        .close:hover { background: #c8d2e2; text-decoration: none;}
        .head { float: left; width: 50px; height:50px; margin-right: 10px;border-radius:25px;}
        .content { float: left; width: 440px;}
        .main { margin-bottom: 10px;}
        .txt { margin-bottom: 10px;}
        .user { color: #369; }
        .pic { margin-right: 5px; width: 200px; border: 1px solid #eee;}
        .info { height: 20px; line-height: 19px; font-size: 12px; margin: 0 0 10px 0;}
        .info .time { color: #ccc; float: left; height: 20px; padding-left: 20px; background: url("./images/bg1.jpg") no-repeat left top;}
        .info .praise { color: #369; float: right; height: 20px; padding-left: 18px; background: url("./images/bg2.jpg") no-repeat left top;}
        .praise_2{background: url("./images/bg3.jpg") no-repeat left top;color: #369; float: right; height: 20px; padding-left: 18px;}
        .praises-total { margin: 0 0 10px 0; height: 20px; background: url("./images/praise.png") no-repeat 5px 5px rgb(247, 247, 247); padding: 5px 0 5px 25px; line-height: 19px;}
        .comment-box { padding: 10px 0; border-top: 1px solid #eee;}
        .comment-box:hover { background: rgb(247, 247, 247);}
        .comment-box .myhead { float: left; width: 30px; height: 30px; margin-right: 10px;border-radius:15px; }
        .comment-box .comment-content { float: left; width: 400px; }
        .comment-box .comment-content .comment-time { color: #ccc; margin-top: 3px; line-height: 16px; position: relative;}
        .comment-box .comment-content .comment-praise { display: none; color: #369; padding-left: 17px; height: 20px; background: url("./images/praise.png") no-repeat;  position: absolute; bottom: 0px; right: 44px;}
        .comment-box .comment-content .comment-operate { display: none; color: #369; height: 20px;  position: absolute; bottom: 0px; right: 10px;}
        .comment-box .comment-content:hover .comment-praise { display: inline-block;}
        .comment-box .comment-content:hover .comment-operate { display: inline-block;}
        .text-box .comment { border: 1px solid #eee; display: block; height: 15px; width: 428px; padding: 5px; resize: none; color: #ccc}
        .text-box .btn { font-size: 12px; font-weight: bold;float: right; width: 65px; height: 25px; border: 1px solid #0C528D; color: #fff; background: #4679AC;}
        .text-box .btn-off { border: 1px solid #ccc; color: #ccc; background: #F7F7F7;}
        .text-box .word{  float: right; margin: 7px 10px 0 0; color: #666;}
        .text-box-on .comment{ height: 50px; color: #333;}
        .text-box-on .btn{ display: inline;}
        .text-box-on .word{ display: inline;}
    </style>
</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;"><b>4</b>个人觉得很赞</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"><b>1</b>赞</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"><b></b>赞</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 () {
        // on() 事件绑定
        $('.comment').on('keyup',function () {
            let len = $(this).val().length;//内容字符长度
            $(this).parent('.text-box').find('.length').text(140-len);
        });
        // 文档中所有的 .btn 绑定事件
        $(document).on('click','.btn',function () {
            let val = $(this).prev().val(); //获取评论内容
            if (val === ''){
                alert('留言内容不能为空！');
            } else {
                let date = new Date();
                let time = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+'  '+date.getHours()+":"+date.getMinutes()+':'+date.getSeconds();
                let 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">'+time+
                    '<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').val('0'); //清空数量



                //输入完成时 文本框恢复高度
                $(this).prev().height(20);
            }
        });
        //输入评论内容 文本框高度增加
        $('.comment').click(function () {
            $(this).height(80);
        });
        // 评论删除
        $('#list').on('click','.comment-operate',function () {
                if (confirm('确认删除吗？')){
                    $(this).parents('.comment-box').remove(); //删除 comment-box
                }else {
                    return false;
                }
        });
        //说说删除
        $('.close').on('click',function () {
            if (confirm('确认删除吗？')){
                $(this).parents('.box').remove(); //删除 box
            }else {
                return false;
            }
        });
        //说说点赞和取消功能
        $('.praise').on('click',function () {
            //获取点赞数量
            let num = $('.praises-total').children('b').text();
            if ($(this).hasClass('clicked')){   //如果点击过了就取消
                num--;
                $('.praises-total').children('b').text(num);
                $(this).text('赞');
                $(this).attr('class','praise');
            } else {  //否则就自增1
                num++;
                $('.praises-total').children('b').text(num);
                $(this).text('取消');
                $(this).attr('class','praise_2'); //替换点赞样式
                $(this).addClass('clicked'); //添加新的class样式
            }
        });
        // 评论点赞
        $('#list').one('click','.comment-praise',function (){
            //获取点赞数量
            let num = parseInt($('.comment-praise').children('b').text());
            let praise = $('.comment-praise');
            num++; //点赞数量加一
            praise.html('<b>'+num+'</b>'+'赞'); //点赞数量写入
        });
    })
</script>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
HTML标签+css基本知识点——2019年1月14日

2019-01-16 13:29:54