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元素。

 1             var list = document.getElementById(‘list‘);
 2             var boxs = document.getElementsByClassName(‘box‘);
 3
 4             //删除节点函数
 5             function removeNode(node){
 6                 node.parentNode.removeChild(node);
 7             }
 8             //事件代理
 9             for(var i=0 ;i<boxs.length;i++){
10                 boxs[i].onclick = function(e){
11                     e = e||window.event;
12                     var el = e.srcElement || e.target;
13                     switch (el.className) {
14                         case ‘close‘:removeNode(el.parentNode);break;
15                     }
16                 }
17             }

2)实现分享的点赞功能

构造一个点赞分享的函数,需要两个参数,第一个参数(box)表示所点赞的最外层父容器,第二个参数(el)指触发的元素,即赞的那个按钮

getAttribute()获得属性,使用setAttribute()来设置元素的属性。

js代码:

 1       //点赞分享
 2             function praiseBox(box,el){//box为所触发元素el的最外层父容器
 3                 var praiseElement = box.getElementsByClassName(‘praise-total‘)[0];
 4                 var oldTotal = parseInt(praiseElement.getAttribute(‘total‘));
 5                 var txt = el.innerHTML;
 6                 var newTotal = 0;
 7                 if(txt == ‘赞‘){
 8                     newTotal = oldTotal + 1;
 9                     praiseElement.innerHTML = (newTotal == 1) ? ‘我觉得很赞‘ : ‘我和‘ + oldTotal +‘个人觉得很赞‘;
10                     el.innerHTML = ‘取消赞‘;
11                 }else{
12                     newTotal = oldTotal - 1;
13                     praiseElement.innerHTML = (newTotal == 0) ? ‘‘ : newTotal + ‘个人觉得很赞‘;
14                     el.innerHTML = ‘赞‘;
15                 }
16                 praiseElement.setAttribute(‘total‘,newTotal);
17                 praiseElement.style.display = (newTotal == 0) ? ‘none‘: ‘block‘;
18             }
19             //事件代理
20             for(var i=0 ;i<boxs.length;i++){
21                 boxs[i].onclick = function(e){
22                     e = e||window.event;
23                     var el = e.srcElement || e.target;
24                     switch (el.className) {
25                         case ‘close‘:removeNode(el.parentNode);break;
26                         case ‘praise‘:praiseBox(el.parentNode.parentNode.parentNode,el);
27                     }
28                 }
29             }

3)实现评论功能

首先要实现评论输入框的改变,通过监听三个事件

1.获得焦点时:onfocus
2.失去焦点:onblur
3.鼠标输入弹起来的时候:onkeyup
 1 //输入框
 2                 var textarea = boxs[i].getElementsByTagName(‘textarea‘)[0];
 3                 textarea.onfocus = function(){
 4                     this.parentNode.className = ‘text-box text-box-on‘;
 5                     this.value = (this.value == ‘评论...‘) ? ‘‘:this.value;
 6                 }
 7                 textarea.onblur = function(){
 8                     if(this.value == ‘‘){
 9                         this.parentNode.className = ‘text-box‘;
10                         this.value = ‘评论...‘;
11                     }
12                 }

4)实现回复按钮和字数统计功能

对textarea添加onkeyup键盘弹起事件,学会利用获取父节点和孩子节点的方法。

为了更好的用户体验,使输入框失去焦点时不是立即变小,所以在onblur中增加一个定时器功能,注意当点击灰色回复按钮时要清除定时器

js代码:

 1      textarea.onblur = function(){
 2                     var me = this;//因为有定时器所以先将this存放于变量中
 3                     timer = setTimeout(function(){
 4                         if(me.value == ‘‘){
 5                             me.parentNode.className = ‘text-box‘;
 6                             me.value = ‘评论...‘;
 7                         }
 8                     },500);
 9                 }
10                 textarea.onkeyup = function(){
11                     var len = this.value.length;
12                     var p = this.parentNode;
13                     var btn = p.children[1];
14                     var word = p.children[2];
15                     if(len == 0 || len > 140){
16                         btn.className = ‘btn btn-off‘;
17                     }else{
18                         btn.className = ‘btn‘;
19                     }
20                     word.innerHTML = len + ‘/140‘;
21                 }

5)实现评论分享功能

当点击回复按钮时,将输入框的内容添加到回复列表中,是通过创建一个div,新增一个回复列表,注意改变新增回复列表的部分内容以及要改变评论的日期。

js代码:

 1 //发表评论
 2             function replayBox(box){
 3                 var textarea = box.getElementsByTagName(‘textarea‘)[0];
 4                 var list = box.getElementsByClassName(‘comment-list‘)[0];
 5                 var div = document.createElement(‘div‘);
 6                 div.className = ‘comment-box clearfix‘;
 7                 div.setAttribute(‘user‘,‘self‘);
 8                 var html = ‘ <img src="images/my.jpg"  class="myhead"  />‘+
 9                         ‘<div class="comment-content">‘+
10                         ‘<p class="comment-text"><span class="user">我:</span>‘+textarea.value+‘</p>‘+
11                         ‘<p class="comment-time">‘+
12                         getTime()+
13                         ‘<a href="javascript:;" class="comment-praise" total="0" my="0" style="">赞</a>‘+
14                         ‘<a href="javascript:;" class="comment-operate">删除</a>‘+
15                         ‘</p>‘+
16                         ‘</div>‘;
17                 div.innerHTML = html;
18                 list.appendChild(div);
19                 textarea.value = ‘‘;
20                 textarea.onblur();
21                 function getTime(){
22                     var t = new Date();
23                     var y = t.getFullYear();
24                     var m = t.getMonth() + 1;//月份是从0开始
25                     var d = t.getDay();
26                     var h = t.getHours();
27                     var mi = t.getMinutes();
28                     m = m>10 ? m: ‘0‘ + m;
29                     d = d>10 ? d: ‘0‘ + d;
30                     h = h>10 ? h: ‘0‘ + h;
31                     mi = mi>10 ?mi: ‘0‘ +mi;
32                     return y + ‘-‘ + m + ‘-‘ + d + ‘ ‘ + h + ‘:‘ + mi;
33                 }
34             }

5)实现点赞回复功能

点赞按钮的a标签中有个my属性,表示自己是否已点赞,当my值为0时,点击赞按钮时total会加一,当my值为1时,点击赞按钮时total减1。

js代码:

 1 //点赞回复
 2             function praiseReplay(el){
 3                 var oldTotal = parseInt(el.getAttribute(‘total‘));
 4                 var my = parseInt(el.getAttribute(‘my‘));
 5                 var newTotal = 0;
 6                 if(my == 0){
 7                     newTotal = oldTotal + 1;
 8                     el.setAttribute(‘total‘,newTotal);
 9                     el.setAttribute(‘my‘,1);
10                     el.innerHTML = newTotal + ‘取消赞‘;
11                 }else{
12                     newTotal = oldTotal - 1;
13                     el.setAttribute(‘total‘,newTotal);
14                     el.setAttribute(‘my‘,0);
15                     el.innerHTML = (newTotal == 0) ? ‘‘ : newTotal + ‘赞‘;
16                 }
17                 el.style.display = (newTotal == 0) ? ‘‘ : ‘inline-block‘;
18             }

6)实现回复列表中内容的删除和回复功能

实现回复他人的评论及删除自己的评论

js代码:

 1  //操作回复
 2             function operateReply(el){
 3                 var commentBox = el.parentNode.parentNode.parentNode;//评论的容器
 4                 var box = commentBox.parentNode.parentNode.parentNode;//该条分享的容器
 5                 var textarea = box.getElementsByTagName(‘textarea‘)[0];
 6                 var user = commentBox.getElementsByClassName(‘user‘)[0];
 7                 var txt = el.innerHTML;
 8                 if(txt == ‘回复‘){
 9                     textarea.onfocus();
10                     textarea.value = ‘回复‘ + user.innerHTML;
11                     textarea.onkeyup();
12                 }
13                 else{
14                     removeNode(el.parentNode.parentNode.parentNode);
15                 }
16             }
时间: 2024-10-11 00:26:45

JavaScript实现评论点赞功能的相关文章

点评点赞功能的基本实现------个人观点

对于做这个功能的时候,我认为很简单,结果错误百出,我认为是notifyDataSetChanged()方法调用失败,结果打印日志,发现该方法被调用了. 然后我很费解,既然已经调用,为何不刷新出新的数据呢????最后的最后,当然是问度娘,度娘她告诉我,关于点赞功能的实现,她知道的其实并 不多,而点赞功能的效果动画确很精通.然后我尝试了几种方法: 1:在onResume()方法中重新绑定adapter,并调用notifyDataSetChanged()方法,结果连个鸡肋都不如,真是浪费感情. 2:然

微信点赞功能测试用例

测试用例: ①点赞和取消点赞功能 ②点赞是否按时间顺序显示 ③点赞是否正确显示昵称或备注 ④点赞之后是否还能评论 ⑤弱网络的情况下点赞能否实时更新 ⑥点赞时有短信或电话进来,能否显示点赞情况 ⑦点赞的人是否在可见分组里 ⑧点赞之后共同好友的点赞和评论是否会提醒你 原文地址:https://www.cnblogs.com/shallwebegin/p/11621991.html

php评论回复功能

这里只实现简单的评论回复功能,并没有设置用户权限,关于权限问题前边的注册登录已经详细的介绍过,所以这里不做赘述: 首先我们要在数据库先建两张表,分别是pinglun表与huifu表: 建立完两张表后,开始写评论模块,首先是建立表单,用文本域显示评论内容,然后用按钮提交到数据库: <form action="pingchuli.php" method="post"> <input type="text" hidden="

js界面刷新&Django使用Ajax实现页面无刷新评论回复功能

Django使用Ajax实现页面无刷新评论回复功能 http://www.cnblogs.com/mfc-itblog/p/5188900.html js界面刷新 http://www.cnblogs.com/dingdingo/archive/2011/10/26/2225307.html js界面刷新&Django使用Ajax实现页面无刷新评论回复功能

微信公众平台新增评论管理功能 可显示用户评论

一大早打开微信公众平台,发现插件那边新增了“评论管理”功能组件,查看了一下,可以显示用户评论.微信公众平台要整合微社区的节奏? 通过腾讯微信相关公告消息称,开通微信认证的公众号可以申请添加该功能模块,发布之前选择开启评论才能评论.可以选择精选评论,公众帐号文章只显示被运营者放入精选的评论.

javascript实现map的功能(转载)

/* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, value) 向MAP中增加元素(key, value) * remove(key) 删除指定KEY的元素,成功返回True,失败返回False * get(key) 获取指定KEY的元素值VALUE,失败返回NULL * element(index) 获取指定索引的元素(使用element.key,

点赞功能

今天琢磨着搞了个点赞功能,因为考虑到个人网站没有根基,所以如果必须要登录才可以点赞的话那绝大部分人肯定转头就走. 如果不登录就可以点赞的话,就要动脑筋去防止刷赞了,我也去看过一些别的网站搞的投票功能,纯粹是以IP来控制,水的不能再水. 表设计如下: 用户ID  IP  浏览器信息  加上cookie  html5缓存  一共5重关卡  任何一关过不去  都点不了赞 流程从点赞的动作开始: 首先js写个变量isLike标志是否点过赞   初始化为否 点击赞图标后: $('body').on("cl

点赞功能实现 $(tag).css(&#39;属性&#39;, &#39;样式&#39;)

1. 创建标签 document.createElement() 2.$(tag).css('属性', 样式) 赋予标签属性样式 3.设置定时器 改变位置 大小 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding:

实现简单的评论区功能

题述: 使用Node.js实现评论区功能,效果如下图.每条评论需要动态修改的部分为楼层号(如 #6),时间戳(如 2018-08-13 11:30),评论内容:昵称和客户端提示不必修改.要求将评论数据存入文件中. 实现所需的文件的目录 ./Comment.js ./index.html ./records.txt ./public/avatar1.jpg ./public/avatar2.jpg ./public/main.css index.html代码部分: 1 <!DOCTYPE html