本文详细讲解如何使用JavaScript实现评论、回复及点赞功能。核心内容包括利用事件代理处理删除与点赞交互，通过DOM操作动态添加评论节点，以及使用setTimeout和clearTimeout优化输入框体验。文章涵盖跨浏览器兼容处理、字数统计逻辑及点赞状态切换，提供完整代码示例与关键参数说明。
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()来设置元素的属性。
相关JavaScript代码如下：
//点赞分享
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中增加一个定时器功能。需要注意的是，当点击灰色的回复按钮时，必须清除该定时器。
相关JavaScript代码如下：
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元素并新增一个回复列表来实现，需要注意改变新增回复列表的部分内容以及更新评论的日期。
相关JavaScript代码如下：
//发表评论
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:;" rel="external nofollow" rel="external nofollow" class="comment-praise" total="0" my="0" style="">赞</a>'+
'<a href="javascript:;" rel="external nofollow" rel="external nofollow" 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加1；当my值为1时，点击赞按钮会使total减1。
相关JavaScript代码如下：
//点赞回复
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）实现回复列表中内容的删除和回复功能。
实现回复他人评论及删除自己评论的功能。
相关JavaScript代码如下：
//操作回复
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);
}
}以上所述是小编给大家介绍的JavaScript评论点赞功能的实现方法，希望对大家有所帮助。如果大家有任何疑问，请留言，小编会及时回复。在此非常感谢大家对本站网站的支持！