这篇文章主要讲解了“JavaScript怎么实现评论点赞功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript怎么实现评论点赞功能”吧!
创新互联公司是专业的华亭网站建设公司,华亭接单;提供成都做网站、网站建设、外贸营销网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行华亭网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
效果图:
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) ? '我觉得很赞' : '我和' + 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中增加一个定时器功能,注意当点击灰色回复按钮时要清除定时器
js代码:
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="images/my.jpg" class="myhead" />'+ '<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" >赞</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会加一,当my值为1时,点击赞按钮时total减1。
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',newTotal); el.setAttribute('my',0); el.innerHTML = (newTotal == 0) ? '' : newTotal + '赞'; } el.style.display = (newTotal == 0) ? '' : 'inline-block'; }
6)实现回复列表中内容的删除和回复功能
实现回复他人的评论及删除自己的评论
js代码:
//操作回复 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怎么实现评论点赞功能”的内容了,经过本文的学习后,相信大家对JavaScript怎么实现评论点赞功能这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
网站标题:JavaScript怎么实现评论点赞功能
转载源于:https://www.cdcxhl.com/article34/pidese.html
成都网站建设公司_创新互联,为您提供网站策划、微信公众号、外贸网站建设、App设计、全网营销推广、网站设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联