视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
使用JavaScript实现评论点赞功能
2020-11-27 20:23:49 责编:小采
文档
通过分析评能的逻辑关系,学会如何使用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元素。

2)实现分享的点赞功能

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

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

js代码:

3)实现评能

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

1.获得焦点时:onfocus

2.失去焦点:onblur

3.鼠标输入弹起来的时候:onkeyup

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

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

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

js代码:

5)实现评论分享功能

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

js代码:

5)实现点赞回复功能

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

js代码:

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

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

js代码:

下载本文
显示全文
专题