JavaScript评论点赞功能的实现方法
前端之家收集整理的这篇文章主要介绍了
JavaScript评论点赞功能的实现方法，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_404_0@通过分析评论功能的逻辑关系，学会如何使用JavaScript实现评论、回复、点赞等各种功能
@H_
4040@1.学会JavaScript处理日期和时间。
@H404_0@2.掌握Dom操作中的
添加/
删除子节点
方法。
@H_
4040@3.使用setTimeout设置定时器。
@H4040@4.使用clearTimeout清除定时器以及事件代理的运用。
@H404_0@
效果图：
<p style="text-align: center">
@H_
404_0@1）实现
删除分享内容功能
@H_
404_0@利用事件代理实现点击
关闭按钮
删除分享内容。
@H_
404_0@
删除事件:
@H_
404_0@利用事件代理
功能,在父元素节点上
添加事件,以减少
代码量和系统运行负荷.
@H_
404_0@事件代理的时候，使用事件对象中的srcElement
属性,
获取触发元素。
@H_
404_0@IE浏览器
支持window.event.srcElement ， 而firefox
支持window.event.target。
@H_
404_0@所以，要想在firefox里面兼容只需要改一个
代码：把var el = e.srcElement 改成 var el = e.srcElement || e.target
@H_
404_0@removeChild()指
删除孩子元素，所以要
删除当前元素el,先要使用parentNode找到父节点，然后在使用removeChild(el)
删除el元素。
<div class="jb51code">
<pre class="brush:js;">
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;
}
}
}
@H_
404_0@2)实现
分享的点赞
功能
@H_
404_0@构造一个点赞
分享的
函数，需要两个参数，第一个参数（
Box）表示所点赞的最外层父容器，第二个参数（el）指触发的元素，即赞的那个按钮
@H_
404_0@getAttribute()获得
属性，使用setAttribute()来设置元素的
属性。
@H_
404_0@js
代码：
分享
function praise
Box(
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':praise
Box(el.parentNode.parentNode.parentNode,el);
}
}
}
@H_
404_0@3)实现
评论功能
@H_
404_0@首先要实现
评论输入框的改变，通过监听三个事件
@H_
404_0@1.获得焦点时：onfocus
@H_
404_0@2.失去焦点：onblur
@H_
404_0@3.鼠标输入弹起来的时候：onkeyup
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 = '
评论...';
}
}
@H_
404_0@4）实现
回复按钮和字数
统计功能
@H_
404_0@对textarea
添加onkeyup
键盘弹起事件，学会利用
获取父节点和孩子节点的
方法。
@H_
404_0@为了更好的
用户体验，使输入框失去焦点时不是立即变小，所以在onblur中
增加一个定时器
功能，注意当点击灰色
回复按钮时要清除定时器
@H_
404_0@js
代码:
140){
btn.className = 'btn btn-off';
}else{
btn.className = 'btn';
}
word.innerHTML = len + '/140';
}
@H_
404_0@5）实现
评论分享功能
@H_
404_0@当点击
回复按钮时，将输入框的
内容添加到
回复列表中，是通过创建一个div，新增一个
回复列表，注意改变新增
回复列表的部分
内容以及要改变
评论的日期。
@H_
404_0@js
代码：
评论
function replay
Box(
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 = '
'+
'';
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;
}
}
@H_
404_0@5）实现点赞
回复功能
@H_
404_0@点赞按钮的a
标签中有个my
属性，表示自己是否已点赞，当my值为0时，点击赞按钮时total会加一，当my值为1时，点击赞按钮时total减1。
@H_
404_0@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',0);
el.innerHTML = (newTotal == 0) ? '' : newTotal + '赞';
}
el.style.display = (newTotal == 0) ? '' : 'inline-block';
}
@H_
404_0@6）实现
回复列表中
内容的
删除和
回复功能
@H_
404_0@实现
回复他人的
评论及
删除自己的
评论
@H_
404_0@js
代码：
回复
function operateReply(el){
var comment
Box = el.parentNode.parentNode.parentNode;//
评论的容器
var
Box = comment
Box.parentNode.parentNode.parentNode;//该条
分享的容器
var textarea =
Box.getElementsByTagName('textarea')[0];
var user = comment
Box.getElementsByClassName('user')[0];
var txt = el.innerHTML;
if(txt == '
回复'){
textarea.onfocus();
textarea.value = '
回复' + user.innerHTML;
textarea.onkeyup();
}
else{
removeNode(el.parentNode.parentNode.parentNode);
}
}
@H_
404_0@以上所述是小编给大家介绍的JavaScript
评论点赞
功能的
实现方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可
分享给好友！感谢
支持。
'+ ''+ '
'+ '