微博输入点赞功能-2019年1月23日 - 作业

Home > List of blog posts > 微博输入点赞功能-2019年1月23日

Blogger Information

Blog 22

fans 0

comment 0

visits 13175

Special Recommendation

More>

Related recommendations

Related Tutorials

Popular Recommendations

Latest courses

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1421854 times of learning
Collection
PHP introductory tutorial one: Learn PHP in one week

4266452 times of learning
Collection
JAVA Beginner's Video Tutorial

2520606 times of learning
Collection

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

微博输入点赞功能-2019年1月23日

小淇的博客

Original

650 people have browsed it

微博输入点赞功能

<!DOCTYPE html>
<html>
<head>
<title>评论功能练习</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="icon" type="image/x-icon" href="static/images/logo.png">
<link rel="stylesheet" type="text/css" href="static/style.css">
</head>
<body>
<div id="list">
    <div class="box clearfix">

        <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>

                <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(){
      // on() 方法可以在被选元素及子元素上添加一个或多个事件处理程序; 绑定事件动态绑定
    //   keyup事件他发生在当前获得焦点的元素上
        $('.comment').on('keyup',function(){
            var len=$(this).val().length    //获取文本框里面的信息内容字符长度
            // find()方法搜索后代元素
            // text()方法修改被选元素的文本内容
            $(this).parents('.text-box').find('.length').text(140-len);
        })
        $(document).on('click','.btn',function(){
            // 遍历方法 prev()获得元素紧邻前一个同胞元素
            var val=$(this).prev().val()//获取文本框内部的信息内容
            if(val==''){
                alert('请输入内容!')
            }else{
                var date=new Date()
                var yy=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">'+yy+'<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(140)
            $(this).prev().height('20')
            }
        })
        $('.comment').click(function(){
            $(this).height(80)
        })
        // 点赞功能
            // 给说说点赞
        $('.praise').on('click',function(){
            $(this).attr('class','prase_2')
        })
        // 评论点赞
        $(document).on('click','.comment-praise',function(){
            var num=parseInt($(this).attr('total'))+1//每次增加一个赞
            $(this).attr('total',num)
            $(this).html(num+'赞')
        })
        $(document).on('click','.comment-operate',function(){
            if(confirm('确定删除吗？')){
                $(this).parents('.comment-box').remove()
            }
        })
        $(document).on('click','.close',function(){
            if(confirm('确定删除吗？')){
                $(this).parents('.box').remove()
            }
        })
    })
</script>
</body>
</html>

总结：

获取文本框长度：

实例

$('.comment').on('keyup',function(){
            var len=$(this).val().length    //获取文本框里面的信息内容字符长度
            // find()方法搜索后代元素
            // text()方法修改被选元素的文本内容
            $(this).parents('.text-box').find('.length').text(140-len);
        })

添加，清除评论

实例

$(this).parents('.box').find('.comment-list').append(html)//添加评论
$(this).parents('.box').find('.comment').val('')//清空评论框

点赞功能：

实例

$('.praise').on('click',function(){
            $(this).attr('class','prase_2')
        })
        $(document).on('click','.comment-praise',function(){
            var num=parseInt($(this).attr('total'))+1//每次增加一个赞
            $(this).attr('total',num)
            $(this).html(num+'赞')
        })

删除功能：

实例

$(document).on('click','.comment-operate',function(){
            if(confirm('确定删除吗？')){
                $(this).parents('.comment-box').remove()
            }
        })
        $(document).on('click','.close',function(){
            if(confirm('确定删除吗？')){
                $(this).parents('.box').remove()
            }
        })

Correction status：qualified

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

关于DOM

2019-01-21 09:01:57