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) "htmlcode">
//输入框
var textarea = boxs[i].getElementsByTagName('textarea')[0];
textarea.onfocus = function(){
this.parentNode.className = 'text-box text-box-on';
this.value = (this.value == '评论...') "htmlcode">
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="/UploadFiles/2021-04-02/my.jpg">
//点赞回复
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) "htmlcode">
//操作回复
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评论点赞功能的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
上一篇：jQuery简易时光轴实现方法示例
下一篇：JS+html5 canvas实现的简单绘制折线图效果示例