window.onload = function () {
?? //獲取元素
?? ?var list=document.getElementById('list');
?? ?//獲取元素中的li
??? ?var lis = list.children;
??? var timer;
?? ?
?? ? //刪除節點
??? function removeNode(node) {
??????? node.parentNode.removeChild(node);
?? ?}
?? ?/*function del(el) {
?? ??? ?var p = el.parentNode;
?? ??? ?p.parentNode.removeChild(p);
?? ?}*/
?? ?
?? ?/**
???? * 贊分享
???? * @param box 每個分享的div容器
???? * @param el 點擊的元素
???? */
??? function praiseBox(box, el){
?? ??? ?var praisesElement = box.getElementsByClassName('praises-total')[0];
?? ??? ?var oldTotal = parseInt(praisesElement.getAttribute('total'));
?? ??? ?var txt = el.innerHTML;
?? ??? ?var newTotal;
?? ??? ?if (txt == '贊') {
??????????? newTotal = oldTotal + 1;
??????????? praisesElement.innerHTML = (newTotal == 1) ? '我覺得很贊' : '我和' + oldTotal + '個人覺得很贊';
?? ??? ??? ?el.innerHTML = '取消贊';
??????? }
?? ??? ?else {
??????????? newTotal = oldTotal - 1;
??????????? praisesElement.innerHTML = (newTotal == 0) ? '' : newTotal + '個人覺得很贊';
?? ??? ??? ?el.innerHTML = '贊';
??????? }
?? ??? ?praisesElement.setAttribute('total',newTotal);
?? ??? ?praisesElement.style.display = (newTotal == 0) ? 'none' : 'block';
??? }
?? ?/**
???? * 發評論
???? * @param box 每個分享的div容器
???? * @param el 點擊的元素
???? */
??? function replyBox(box/*, el*/) {
?? ??? ?var textarea = box.getElementsByTagName('textarea')[0];
?? ??? ?var list = box.getElementsByClassName('comment-list')[0];
?? ??? ?var li = document.createElement('li');
?? ??? ?li.className = 'comment-box clearfix';
?? ??? ?li.setAttribute('user', 'self');
?? ??? ?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()+
??????? /* formateDate(new Date()) +*/
??????? ??? ?'<a href="javascript:;" class="comment-praise" total="0" my="0" style="">贊</a>' +
??????????? '<a href="javascript:;" class="comment-operate">刪除</a>' +
??????????? '</p>' +
???????? '</div>'
?? ??? ?li.innerHTML = html;
??????? list.appendChild(li);
?? ??? ?textarea.value = '';
?? ??? ?textarea.onblur();
??? }
?? ?//格式化日期
??? function getTime(){
?? ??? ?var t = new Date();
??????? var y = date.getFullYear();
??????? var m = date.getMonth() + 1;
??????? var d = date.getDate();
??????? var h = date.getHours();
??????? var mi = date.getMinutes();
?? ??? ?m = m < 10 ? '0' + m : m;
?? ??? ?d = d < 10 ? '0' + d : d;
?? ??? ?h = h < 10 ? '0' + h : h;
?? ??? ?mi = mi < 10 ? '0' + mi : mi;
??????? /*m = m > 9 ? m : '0' + m;*/
??????? return y + '-' + m + '-' + d + ' ' + h + ':' + mi;
??? }
?? ? /**
???? * 贊回復
???? * @param el 點擊的元素
???? */
??? function praiseReply(el){
?? ??? ?var oldTotal = parseInt(el.getAttribute('total'));
?? ??? ?var my = parseInt(el.getAttribute('my'));
?? ??? ?var newTotal;
??????? 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';
?????? ?
??? }
/**
???? * 操作留言
???? * @param el 點擊的元素
???? */
?? ?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]/*.innerHTML*/;
??????? var txt = el.innerHTML;
?? ??? ?if (txt == '回復') {
??????????? textarea.onfocus();
??????????? textarea.value = '回復' + user.innerHTML;
??????????? textarea.onkeyup();
??????? }
?? ??? ?else {
??????????? removeNode(commentBox);
??????? }
??? }
?? ?
?? ?
?? ?
?? ?//評論
??????? var textArea = boxs[i].getElementsByClassName('comment')[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;
??????????? var val = me.value;
??????????? if (val == '') {
??????????????? timer = setTimeout(function () {
??????????????????? me.value = '評論…';
??????????????????? me.parentNode.className = 'text-box';
??????????????? }, 200);
??????????? }
??????? }

??????? //評論按鍵事件
??????? textArea.onkeyup = function () {
??????????? var val = this.value;
??????????? var len = val.length;
??????????? var els = this.parentNode.children;
??????????? var btn = els[1];
??????????? var word = els[2];
??????????? if (len <=0 || len > 140) {
??????????????? btn.className = 'btn btn-off';
??????????? }
??????????? else {
??????????????? btn.className = 'btn';
??????????? }
??????????? word.innerHTML = len + '/140';
??????? }

?? ? //遍歷，把事件代理到每條分享div容器
?? ?for(var i=0; i<lis.length; i++){
?? ??? ?//每一個li（分享）都有點擊事件
?? ??? ?lis[i].onclick = function(e){
?? ??? ??? ?//獲取觸發的元素，對點擊時傳進的第一個參數也就是事件對象
?? ??? ??? ?e=e||window.event;
?? ??? ??? ?//變量，用來存放觸發元素
?? ??? ??? ?var el = e.srcElement;
?? ??? ??? ?//循環? 關閉分享
?? ??? ??? ?switch(el.className){
?? ??? ??? ??? ?case 'close':
?? ??? ??? ??? ??? ?removeNode(el.parentNode);
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ?//贊分享
??????????????? case 'praise':
??????????????????? praiseBox(el.parentNode.parentNode.parentNode, el);
??????????????????? break;
?? ??? ??? ??? ?//回復按鈕藍
??????????????? case 'btn':
??????????????????? replayBox(el.parentNode.parentNode.parentNode/*, el*/);
??????????????????? break;
??????????????? //回復按鈕灰
??????????????? case 'btn btn-off':
??????????????????? clearTimeout(timer);
??????????????????? break;?? ?
?? ??? ??? ??? ?//贊留言
??????????????? case 'comment-praise':
??????????????????? praiseReply(el);
??????????????????? break;

??????????????? //操作留言
??????????????? case 'comment-operate':
??????????????????? operateReply(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 () {
?????????? var me = this;
?? ??? ??? ?if (this.value == '') {
?? ??? ??? ??? ?timer = setTimeout(function () {
?? ??? ??? ??? ??? ?me.parentNode.className = 'text-box';
?? ??? ??? ??? ??? ?me.value = '評論…';
?? ??? ??? ??? ?},400);
??????????? }
??????? }

??????? //評論按鍵事件
??????? textarea.onkeyup = function (e){
??????????? 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';
??????? }

??? }
?? ??? ?
?? ??? ?
}