使用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代码：

以上就是使用JavaScript实现评论点赞功能的详细内容，更多请关注Gxl网其它相关文章！