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="data:images/my.jpg" class="myhead" alt="" />'+ 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 }
转载于:https://www.cnblogs.com/Lovebugs/p/6526764.html
JavaScript实现评论点赞功能相关推荐
- 使用JavaScript实现评论点赞功能
http://www.php.cn/js-tutorial-357679.html 首页> js教程> 正文 使用JavaScript实现评论点赞功能 作者: default|标签:jav ...
- 十次方项目开发系列【8】:对评论点赞功能开发 Redis的配置和使用
使用对评论点赞和取消点赞功能开发 一 评论点赞功能开发 1.1 先根据评论的id查询,再对点赞数加一 1.1.1 在CommentController添加方法 1.1.2 在CommentServic ...
- 帖子回复评论点赞功能
一.表设计 评论表 点赞表 回复表 帖子表 1.评论表 @Data @Accessors(chain = true) @ApiModel("评论表") @Entity(name = ...
- 点赞功能java_jquery实现点赞功能
点赞已经流行多年,点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,欢迎大家点赞. 要实现的点赞功能比较简单,就是实现点击按钮,有心向上飘,一直 ...
- 百万前端之JavaScript+jquery实现点赞、收藏、评论功能
点赞收藏的原理都是一样,通过点击切换文字和图片实现动态点赞收藏功能. 图标来源 阿里图标库 评论功能原理也很简单,在页面中写好评论css样式,再通过js生成div节点,再嵌套内容,用最原始的方法,解决 ...
- 微信小程序实现评论多级展开收起以及点赞功能
我们先来看看效果 所有效果均已实现,可以自己写写体验一下 接下来看看看代码 wxml <!--pages/commodity/commodity-write-back/index.wxml--& ...
- JavaScript cookie操作实现点赞功能
实现一个点赞功能十分简单,主要问题在于不能重复点赞. 若是一个有用户的网站,可以通过数据库设计记录用户的点赞,这是可行的. 但是若是一个不记名的网站,如何记录一个用户呢? 这里有两种方法: 第一种是利 ...
- 微博评论点赞mysql设计_关于微博评论功能的设计与思考
前几天的上线功能bug,由于评论数量过多,未异步加载,导致数据丢失,原因是新老功能迁移时未做异步加载,就此功能找一下微博类评论等功能的架构设计思考,还有其他产品,社区,论坛,博客等. 微博曾流传可支撑 ...
- android 仿微博评论编辑框_Android 仿微博的点赞功能的实现原理(持续点赞再取消)...
产品需求,实现类似微博的持续点赞再取消功能,因为自己也偶尔刷微博,对这功能有一定的使用上的了解, 至于微博点赞的具体实现我并不知道,微博点赞在断网的情况下依然能点赞,不会提示网络异常,等有网络之后 重 ...
最新文章
- redis api java 正则_java代码怎么正则删除redis的数据
- android+note2+分辨率,魅蓝Note2的屏幕尺寸是多少?魅蓝Note2的分辨率是多少?
- 机器学习导论(张志华):正定核性质
- 【JAVA秒会技术之秒杀面试官】JavaSE常见面试题(二)
- 9名程序员被抓!这次真的活该.....
- PHP面试常考内容之面向对象(3)
- 英特尔处理器的性能监控事件文件下载
- fcm模糊聚类matlab实例_智能控制-Fuzzy控制- matlab
- python钓鱼评论爬取
- PHP肥料源码_PHP农场养殖游戏巨人农场复利平台源码带抽奖
- ACPYPE中FAILED: [Errno 2] No such file or directory: 'FFF_AC.prmtop'的解决方法
- 游戏引擎Flax Engine分析(八)渲染
- java实现抛物线轨迹计算_JavaFX中抛物线轨迹的时间线
- 将机械硬盘换成固态硬盘的装机过程
- JAVA大数据需要学什么
- html5+canvas+九宫格,javascript+canvas制作九宫格小程序
- 简单服务端和客户端的开发
- FFmpeg之sws_scale库的应用(sws_getContext、sws_scale、sws_freeContext)
- python raise函数
- fuchsia Zircon Hypervisor:调测手段
热门文章
- Android音乐播放器开发的MediaPlayer出现IllegalStateException
- java如何打开hprof_hprof是什么文件?如何打开hprof?
- oracle净额结算批报错,Oracle 运行脚本报错 ORA-20785: Workaround is not needed.
- foxmail服务器邮箱登录,Foxmail进行远程邮箱管理
- 【PDFBox】PDFBox操作PDF文档之添加本地图片、添加网络图片、图片宽高自适应、图片水平垂直居中对齐
- 十个Python实用脚本,快用起来
- OpenCV—Python视频的读取及保存
- 【译】CSS 自定义属性的策略指南
- mtcnn人脸检测python_opencv+mtcnn+facenet+python+tensorflow 实现实时人脸识别
- java的性能,网上说 Java 的性能,已经达到甚至超过 C++,是真的吗?