摘要:本篇教程介绍了JavaScript如何实现评论点赞功能,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。
本篇教程介绍了JavaScript如何实现评论点赞功能,希望阅读本篇文章以后大家有所收获,帮助大家对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 }
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号