JavaScript网页特效（二）动态评论功能实现

JavaScript是在静态页面下在网页上添加一些功能使其成为动态网页。

类似qq空间，可以对每条动态进行评论，点赞，回复等功能。
这里主要记录一下几个功能的实现。

1、删除一条动态

在每条动态的右上方有个叉叉，点击之后这条动态就会被删除。
实现起来很简单。就是把这个节点删除掉。而删除节点就是找到它的父节点然后调用removeChild方法，把自己传入即可。

function removenode(node){
        node.parentNode.removeChild(node);
    }

2、为一条动态点赞

这里传入两个参数，elem是目标元素，或者说是触发事件的元素。box的elem的容器。

function praiseBox(box,elem){
        var praiseElement=box.getElementsByClassName('praises-total')[0];
        var oldTotal=parseInt(praiseElement.getAttribute('total'));
        var txt=elem.innerHTML;
        var newTotal;
        if (txt == '赞') {
            newTotal=oldTotal+1;
            praiseElement.innerHTML=(newTotal==1)?'我觉得很赞':'我和'+oldTotal+'个人觉得很赞';
            elem.innerHTML='取消赞';
        }else{//取消赞
            newTotal=oldTotal-1;
            praiseElement.innerHTML=(newTotal==0)?'':newTotal+'个人觉得很赞';
            elem.innerHTML='赞';
        }
        praiseElement.setAttribute('total',newTotal);
        praiseElement.style.display=(newTotal==0)?'none':'block';
    }

3、输入框的效果

//获取输入框元素
        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(){
            var me=this;
            timer=setTimeout(function(){
                me.parentNode.className='text-box';
            if (me.value=='') {
                me.value='评论…';
            }
        },400);
    }
    //键盘弹起时。统计字数
        textarea.onkeyup=function(){
            var len=this.value.length;
            var btn=this.parentNode.children[1];//回复按钮
            var word=this.parentNode.children[2];
            if (len==0||len>140) {
                btn.className='btn btn-off';
            }else{
                btn.className='btn';
                word.innerHTML=len+'/140';
            }
        }
    }

4、评论

评论这个功能需要进行字符串的拼接，创建节点和添加节点

function replyBox(box){
        var textarea=box.getElementsByTagName('textarea')[0];
        var list=box.getElementsByClassName('comment-list')[0];
        var div=document.createElement('div');
        div.className='comment-box clearfix';
        var html='<img class="myhead" src="images/my.jpg" 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" style="">赞</a>'+
                               ' <a href="javascript:;" class="comment-operate">删除</a>'+
                            '</p>';
        div.innerHTML=html;
        list.appendChild(div);
        textarea.value='';//清空输入框
        textarea.onblur();//失去焦点
    }

这里获取的时间需要单独写一个方法获取当前的时间，格式如2016-03-02

function getTime(){
        var now=new Date();
        var y=now.getFullYear();
        var m=now.getMonth()+1;
        m=(m<10)?'0'+m:m;
        var d=now.getDate();
        var h=now.getHours();
        h=(h<10)?'0'+h:h;
        var mi=now.getMinutes();
        mi=(mi<10)?'0'+mi:mi;
        return y+'-'+m+'-'+d+" "+h+':'+mi;
    }

5、评论点赞和评论回复

//评论点赞
    function praiseReply(elem){
        var oldTotal=parseInt(elem.getAttribute('total'));
        var my=elem.getAttribute('my');
        var newTotal;
        if (my==0) {
            newTotal=oldTotal+1;
            elem.setAttribute('total',newTotal);
            elem.setAttribute('my',1);
            elem.innerHTML=newTotal+"  取消赞";
        }else{
            newTotal=oldTotal-1;
            elem.setAttribute('total',newTotal);
            elem.setAttribute('my',0);
            elem.innerHTML=newTotal==0?'赞':newTotal+' 赞';
        }
        elem.style.display=(newTotal==0)?'':'block';
    }
    //评论回复
    function commentReply(elem){
        var commentBox=elem.parentNode.parentNode.parentNode;//获取评论的容器
        var box=commentBox.parentNode.parentNode.parentNode;//获取分享的容器
        var textarea=box.getElementsByTagName('textarea')[0];
        var user=commentBox.getElementsByClassName('user')[0];
        if (elem.innerHTML=='回复') {
            textarea.onfocus();
            textarea.value='回复'+user.innerHTML;
            textarea.onkeyup();
        }else{//删除
            removenode(commentBox);

        }

    }

6、事件代理

e这个变量表示的是一个事件对象，我们只需要写一点点跨浏览器的代码来返回目标元素，在IE里目标元素放在srcElemnt属性中，而在其它浏览器里则是target属性。

for (var i = 0; i < lis.length; i++) {
        lis[i].onclick=function(e){
            e=e||window.event;//获取触发事件的对象，这里做浏览器的兼容
            var elem=e.srcElement||e.target;//获得触发元素!!!
            switch (elem.className){
                case 'close':
                    removenode(elem.parentNode);
                    break;
                case 'praise':
                    praiseBox(elem.parentNode.parentNode.parentNode,elem);
                    break;
                //回复按钮为灰色
                case 'btn btn-off':
                    clearTimeout(timer);
                    break;
                //回复按钮为蓝色
                case 'btn':
                    replyBox(elem.parentNode.parentNode.parentNode);
                    break;
                //评论点赞
                case 'comment-praise':
                    praiseReply(elem);
                break;
                //评论回复
                case 'comment-operate':
                commentReply(elem);
                break;
            }
        }

源代码下载