JavaScript實現評論點贊功能

通過分析評論功能的邏輯關系，學會如何使用JavaScript實現評論、回復、點贊等各種功能

1.學會JavaScript處理日期和時間。

2.掌握Dom操作中的添加/刪除子節點方法。

3.使用setTimeout設置定時器。

4.使用clearTimeout清除定時器以及事件代理的運用。

效果圖：

1）實現刪除分享內容功能

利用事件代理實現點擊關閉按鈕刪除分享內容。

刪除事件:
利用事件代理功能,在父元素節點上添加事件,以減少代碼量和系統運行負荷.

事件代理的時候，使用事件對象中的srcElement屬性,獲取觸發元素。
IE瀏覽器支持window.event.srcElement ， 而firefox支持window.event.target。
所以，要想在firefox里面兼容只需要改一個代碼：把var el = e.srcElement 改成 var el = e.srcElement || e.target

removeChild()指刪除孩子元素，所以要刪除當前元素el,先要使用parentNode找到父節點，然后在使用removeChild(el)刪除el元素。

            var list = document.getElementById('list');
            var boxs = document.getElementsByClassName('box');

            //刪除節點函數
            function removeNode(node){
                node.parentNode.removeChild(node);
            }
            //事件代理
            for(var i=0 ;i<boxs.length;i++){
                boxs[i].onclick = function(e){
                    e = e||window.event;
                    var el = e.srcElement || e.target;
                    switch (el.className) {
                        case 'close':removeNode(el.parentNode);break;
                    }
                }
            }

2)實現分享的點贊功能

 構造一個點贊分享的函數，需要兩個參數，第一個參數（box）表示所點贊的最外層父容器，第二個參數（el）指觸發的元素，即贊的那個按鈕

getAttribute()獲得屬性，使用setAttribute()來設置元素的屬性。

js代碼：

      //點贊分享
            function praiseBox(box,el){//box為所觸發元素el的最外層父容器
                var praiseElement = box.getElementsByClassName('praise-total')[0];
                var oldTotal = parseInt(praiseElement.getAttribute('total'));
                var txt = el.innerHTML;
                var newTotal = 0;
                if(txt == '贊'){
                    newTotal = oldTotal + 1;
                    praiseElement.innerHTML = (newTotal == 1) ? '我覺得很贊' : '我和' + oldTotal +'個人覺得很贊';
                    el.innerHTML = '取消贊';
                }else{
                    newTotal = oldTotal - 1;
                    praiseElement.innerHTML = (newTotal == 0) ? '' : newTotal + '個人覺得很贊';
                    el.innerHTML = '贊';
                }
                praiseElement.setAttribute('total',newTotal);
                praiseElement.style.display = (newTotal == 0) ? 'none': 'block';
            }
            //事件代理
            for(var i=0 ;i<boxs.length;i++){
                boxs[i].onclick = function(e){
                    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);
                    }
                }
            }

3)實現評論功能

首先要實現評論輸入框的改變，通過監聽三個事件

1.獲得焦點時：onfocus
2.失去焦點：onblur
3.鼠標輸入彈起來的時候：onkeyup

//輸入框
                var textarea = boxs[i].getElementsByTagName('textarea')[0];
                textarea.onfocus = function(){
                    this.parentNode.className = 'text-box text-box-on';
                    this.value = (this.value == '評論...') ? '':this.value;
                }
                textarea.onblur = function(){
                    if(this.value == ''){
                        this.parentNode.className = 'text-box';
                        this.value = '評論...';
                    }
                }

 4）實現回復按鈕和字數統計功能

對textarea添加onkeyup鍵盤彈起事件，學會利用獲取父節點和孩子節點的方法。

為了更好的用戶體驗，使輸入框失去焦點時不是立即變小，所以在onblur中增加一個定時器功能，注意當點擊灰色回復按鈕時要清除定時器

js代碼:

     textarea.onblur = function(){
                    var me = this;//因為有定時器所以先將this存放於變量中
                    timer = setTimeout(function(){
                        if(me.value == ''){
                            me.parentNode.className = 'text-box';
                            me.value = '評論...';
                        }
                    },500);
                }
                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 || len > 140){
                        btn.className = 'btn btn-off';
                    }else{
                        btn.className = 'btn';
                    }
                    word.innerHTML = len + '/140';
                }

 5）實現評論分享功能

當點擊回復按鈕時，將輸入框的內容添加到回復列表中，是通過創建一個div，新增一個回復列表，注意改變新增回復列表的部分內容以及要改變評論的日期。

js代碼：

//發表評論
            function replayBox(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 src="images/my.jpg"  class="myhead" 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>';
                div.innerHTML = html;
                list.appendChild(div);
                textarea.value = '';
                textarea.onblur();
                function getTime(){
                    var t = new Date();
                    var y = t.getFullYear();
                    var m = t.getMonth() + 1;//月份是從0開始
                    var d = t.getDay();
                    var h = t.getHours();
                    var mi = t.getMinutes();
                    m = m>10 ? m: '0' + m;
                    d = d>10 ? d: '0' + d;
                    h = h>10 ? h: '0' + h;
                    mi = mi>10 ?mi: '0' +mi;
                    return y + '-' + m + '-' + d + ' ' + h + ':' + mi;
                }
            }

 5）實現點贊回復功能

點贊按鈕的a標簽中有個my屬性，表示自己是否已點贊，當my值為0時，點擊贊按鈕時total會加一，當my值為1時，點擊贊按鈕時total減1。

js代碼：

//點贊回復
            function praiseReplay(el){
                var oldTotal = parseInt(el.getAttribute('total'));
                var my = parseInt(el.getAttribute('my'));
                var newTotal = 0;
                if(my == 0){
                    newTotal = oldTotal + 1;
                    el.setAttribute('total',newTotal);
                    el.setAttribute('my',1);
                    el.innerHTML = newTotal + '取消贊';
                }else{
                    newTotal = oldTotal - 1;
                    el.setAttribute('total',newTotal);
                    el.setAttribute('my',0);
                    el.innerHTML = (newTotal == 0) ? '' : newTotal + '贊';
                }
                el.style.display = (newTotal == 0) ? '' : 'inline-block';
            }

 6）實現回復列表中內容的刪除和回復功能

實現回復他人的評論及刪除自己的評論

 js代碼：

 //操作回復
            function operateReply(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();
                }
                else{
                    removeNode(el.parentNode.parentNode.parentNode);
                }
            }