×

【每日一学】分享一个很不错的评论功能

作者:天空2016.12.23来源:Web前端之家浏览:21841评论:1
关键词:评论

【每日一学】分享一个评论功能。

功能主要实现:点赞 取消赞 评论 删除 回复 字数统计
利用事件代理。

oDiv.onclick=function(e){
     e=e||window.event;
      var el=e.srcElement||e.target
     if(el.className=='del'){
     }

或者

switch(el.className){
      case  'del':
       执行;
       break;
   }
}

看下代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        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: 60px; height: 60px; margin-right: 10px;}
        .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("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=4d6786221f265857f127655175b84728") no-repeat left top;background-size:16px 16px}
        .info .praise { color: #369; float: right; height: 20px; padding-left: 18px; background: url("http://cdn.attach.qdfuns.com/notes/pics/201612/16/213536ntyz1os1mcrllygs.jpg.editor.jpg") no-repeat left top;background-size:16px 16px}
        .info .praise:hover { text-decoration: underline; background: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=c3e3b865e2830bb178a58d6404037a6a") no-repeat left top;background-size:16px 16px}
        .praises-total { margin: 0 0 10px 0; height: 20px; background: url("http://cdn.attach.qdfuns.com/notes/pics/201612/16/213536ntyz1os1mcrllygs.jpg.editor.jpg") no-repeat 5px 5px rgb(247, 247, 247); padding: 5px 0 5px 25px; line-height: 19px;background-size:16px 16px}
        .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;}
        .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("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=671df721b51bf652185d4b730e514c8d") no-repeat;  position: absolute; bottom: 0px; right: 44px;background-size:16px 16px}
        .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; display: none; 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{ display: none; 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">
            <a class="close" href="javascript:;">×</a>
            <img class="head" src="http://cdn.attach.qdfuns.com/notes/pics/201612/16/213524t29ipa2p26p2ij9a.jpg.editor.jpg" alt=""/>
            <div class="content">
                <div class="main">
                    <p class="txt">
                        <span class="user">Andy:</span>轻轻的我走了,正如我轻轻的来;我轻轻的招手,作别西天的云彩。
                    </p>
                    <img class="pic" src="http://cdn.attach.qdfuns.com/notes/pics/201612/16/213444wrzo2jgjk26sjmj6.jpg.editor.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="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8de7f473592034ece3bfe53deec17617" alt=""/>
                        <div class="comment-content">
                            <p class="comment-text"><span class="user">我:</span>写的太好了。</p>
                            <p class="comment-time">
                                2014-02-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" autocomplete="off" maxlength="140">评论…</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="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=1916cdf7514bf2d2fd50f3f9ee3e5794" alt=""/>
            <div class="content">
                <div class="main">
                    <p class="txt">
                        <span class="user">人在旅途:</span>三亚的海滩很漂亮。
                    </p>
                    <img class="pic" src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=460a2f672b4a5bee8d3cf732f7779a18" 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="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=460a2f672b4a5bee8d3cf732f7779a18" alt=""/>
                        <div class="comment-content">
                            <p class="comment-text"><span class="user">老鹰:</span>我也想去三亚。</p>
                            <p class="comment-time">
                                2014-02-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" autocomplete="off" maxlength="140">评论…</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="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=e782df0c58bab4b389f3c045ff7cc5ef" alt=""/>
            <div class="content">
                <div class="main">
                    <p class="txt">
                        <span class="user">小Y:</span>英国艺术家 Jane Perkins 能利用很多不起眼的东西进行创作,甚至是垃圾。首饰、纽扣、玩具等等都可以作为他创作的工具并创作出惟妙惟肖的画作,丝毫不逊色于色彩丰富的颜料。
                    </p>
                </div>
                <div class="info clearfix">
                    <span class="time">02-11 13:17</span>
                    <a class="praise" href="javascript:;">赞</a>
                </div>
                <div class="praises-total" total="0" style="display: none;"></div>
                <div class="comment-list">
                </div>
                <div class="text-box">
                    <textarea class="comment" autocomplete="off" maxlength="140">评论…</textarea>
                    <button class="btn ">回 复</button>
                    <span class="word"><span class="length">0</span>/140</span>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript">
    var list=document.getElementById('list')
    var lis=list.children;
    //删除节点
    function removeNode(el){
        el.parentNode.removeChild(el)
    }
    //点赞功能
    function praiseBox(box, el){
        var praiseElement=box.getElementsByClassName('praises-total')[0]
        var oldTotal=parseInt(praiseElement.getAttribute('total'))
        var newTotal;
        if(el.innerHTML=='赞'){
            newTotal=oldTotal+1
            praiseElement.innerHTML=newTotal==1?'我觉得很赞':'我和'+oldTotal+'个人觉得很赞'
            el.innerHTML='取消赞'
        }else{
            newTotal=oldTotal-1
            praiseElement.innerHTML=newTotal==0?'':newTotal+'个人觉得很赞'
            el.innerHTML='赞'
        }
        praiseElement.style.display=newTotal>0?'block':'none'
        praiseElement.setAttribute('total',newTotal)
    }
    //发表评论
    function replay(box){
        var textarea=box.getElementsByTagName('textarea')[0]
        var list=box.getElementsByClassName('comment-list')[0]
        var div=document.createElement('div')
        div.className='comment-box clearfix'
        div.setAttribute('user','self')
        var  html='<img class="myhead" src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8de7f473592034ece3bfe53deec17617" alt=""/>'+
                  '<div class="comment-content">'+
                  '<p class="comment-text"><span class="user">我:</span>'+textarea.value+'</p>'+
                  '<p class="comment-time">'+
                  getTime()+
                  '<a href="javascript:;" class="comment-praise" total="0" my="0">赞</a>'+
                  '<a href="javascript:;" class="comment-operate">删除</a>'+
                  '</p>'+
                  '</div>'
        div.innerHTML=html
        list.appendChild(div)
        textarea.value=''
        textarea.onblur()
    }
    function toTwo(a){
        if(a<10){
            return '0'+a;
        }else{
            return ''+a
        }
    }
    function getTime(){
        var time=new Date()
        var year=time.getFullYear()
        var month=time.getMonth()+1
        var date=time.getDate()
        var h=time.getHours()
        var m=time.getMinutes()
        var s=time.getSeconds()
        return year+'-'+toTwo(month)+'-'+date+' '+toTwo(h)+':'+toTwo(m)
    }
    //赞回复
    function praiseReplay(el){
        var oldTotal=parseInt(el.getAttribute('total'))
        var my=parseInt(el.getAttribute('my'))
        var newTotal;
        if(my==0){
            newTotal=oldTotal+1;
            el.innerHTML=newTotal+' 取消赞'
            el.setAttribute('total',newTotal)
            el.setAttribute('my',1)
        }else{
            newTotal=oldTotal-1;
            el.innerHTML=newTotal==0?'赞':newTotal+' 赞'
            el.setAttribute('total',newTotal)
            el.setAttribute('my',0)
        }
        el.style.display=newTotal==0?'':'inline-block'
    }
    //操作回复
    function operateReplay(el){
        var commentBox=el.parentNode.parentNode.parentNode
        var box=commentBox.parentNode.parentNode.parentNode
        var textarea=box.getElementsByTagName('textarea')[0]
        var user=commentBox.getElementsByClassName('user')[0]
        var txt=el.innerHTML
        if(txt=='回复'){
            textarea.onfocus()
            textarea.value='回复'+user.innerHTML
            textarea.onkeyup=function(){
                var len=this.value.length-user.innerHTML.length-2;
                var p=this.parentNode;
                var btn=p.children[1]
                var word=p.children[2]
                if(len==0){
                    btn.className='btn btn-off'
                }else{
                    btn.className='btn'
                }
                word.innerHTML=len+'/140'
            }
        }else{
            removeNode(commentBox)
        }
    }
    for(var i=0;i<lis.length;i++){
        lis[i].onclick=function(e){
            var e=e||window.event
            var el=e.srcElement||e.target
            switch(el.className){
                case 'close':
                removeNode(el.parentNode);
                break;
                //赞分享
                case 'praise':
                praiseBox(el.parentNode.parentNode.parentNode,el);
                break;
                //发表评论
                case 'btn':
                replay(el.parentNode.parentNode.parentNode);
                break;
                //赞回复
                case 'comment-praise':
                praiseReplay(el);
                break;
                //操作回复
                case 'comment-operate':
                operateReplay(el);
                break;
            }
        }
        //评论功能
        var textarea=lis[i].getElementsByTagName('textarea')[0]
        textarea.onfocus=function(){
            this.parentNode.className='text-box text-box-on'
            this.value=this.value=='评论…'?'':this.value
            this.onkeyup()
        }
        textarea.onblur=function(){
            if(this.value==''){
                this.parentNode.className='text-box'
                this.value='评论…'
            }
        }
        textarea.onkeyup=function(){
            var len=this.value.length;
            var p=this.parentNode;
            var btn=p.children[1]
            var word=p.children[2]
            if(len==0){
                btn.className='btn btn-off'
            }else{
                btn.className='btn'
            }
            word.innerHTML=len+'/140'
        }
    }
</script>
</body>
</html>

大家贴到网页中试下吧。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/biji007.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表