效果没有?是哪里写错了吗??
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';
}
}
}