通过分析评论功能的逻辑关系，学习如何使用JavaScript实现评论、回复、点赞等各种功能

1.学习JavaScript处理日期和时间。

2.掌握Dom操作中添加/删除子节点的方法。

3.使用setTimeout设置计时器。

4.使用clearTimeout来清除计时器和使用事件代理。

渲染：

1)实现删除共享内容的功能

通过单击关闭按钮，使用事件代理删除共享内容。

删除事件：

通过使用事件代理的功能，在父元素节点上添加事件，以减少代码量和系统运行负载。

当作为事件代理时，使用事件对象中的srcElement属性来获取触发器元素。

IE浏览器支持window.event.srcElement，而火狐支持window.event.target

因此，如果想要在firefox中兼容，只需要更改一个代码：将var el=e.srcElement更改为varel=e.srcelement | | e.target。

removeChild()是指删除子元素，所以要删除当前元素el，首先要使用parentNode找到父节点，然后使用removeChild(el)删除el元素。

var list=document . getelementbyid(' list ')；var boxs=document . getelementsbyclassname(' box ')；//删除节点函数removeNode(节点){node。parentnode。removechild(节点)；}//的事件代理(var I=0；ibox s . length；i ){ boxs[i]。onclick=function(e){ e=e | | window . event；var El=e . srcelelement | | e . target；switch(El . class name){ case ' close ' : remove node(El . parent node)；打破；}} }2)实现分享表扬功能

构造一个喜欢分享的函数需要两个参数。第一个参数(box)表示喜欢的最外层父容器，第二个参数(el)指的是被触发的元素，也就是喜欢的按钮

GetAttribute()获取属性，setAttribute()用于设置元素的属性。

Js代码：

//喜欢分享函数祈祷盒(box，el) {//box是触发元素El var祈祷元素=box . getelementsbyclassname(' probe-total ')[0]的最外层父容器；var oldTotal=parsent(Praiselement . GetAttribute(' total '))；var txt=el.innerHTMLvar牛顿=0；if(txt==' like '){ newTotal=oldTotal 1；praiseelement . innerhtml=(newTotal==1)？我觉得很棒‘:’和‘oldTotal’个人觉得很棒；El.innerHTML='取消表扬'；} else { newTotal=oldTotal-1；praiseelement . innerhtml=(newTotal==0)？牛顿“个人觉得很不错”；El.innerHTML='赞'；} PriaseeElement . SetAttribute(' total '，NewTotal)；' praiseElement.style.display=(牛顿==0)？'none ' : ' block}//的事件代理(var I=0；ibox s . length；i ){ boxs[i]。onclick=function(e){ e=e | | window . event；var El=e . srcelelement | | e . target；switch(El . class name){ case ' close ' : remove node(El . parent node)；打破；案例‘赞’: praise box(El . parent node . parent node . parent node，El)；}} }3)实现注释功能

首先，我们必须通过监视三个事件来更改注释输入框

1.聚焦时：聚焦

2.失去焦点：on bulr

3.当鼠标输入弹出时：onkeyup

//输入框var textarea=boxs [I]。getelementsbytagname(' text area ')[0]；text area . onfocus=function(){ this . parentnode . class name=' text-box text-box-on '；this . value=(this . value==' comment . ')?' :this.value} text area . onbulr=function(){ if(this . value==' '){ this . parent node . class name=' text-box '；This.value=' comment . '；} }4)实现回复按钮和字数统计功能

给textarea添加onkeyup键盘弹出事件，学习使用获取父节点和子节点的方法。

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

射流研究…代码：

文本区。onbulr=function(){ var me=this；//因为有定时器所以先将这存放于变量中timer=setTimeout(函数(){ if(me。value=' '){ me。父节点。类名='文本框'；me.value='评论.'；} },500);}文本区。onkeyup=function(){ var len=this。价值。长度；var p=this . parentnodevar BTN=p . children[1]；var word=p . children[2]；if(len==0 | | len 140){ BTN。类名=' BTNBTN-关'；} else { btn.className=' btn} word。innerhtml=len '/140 '；}5)实现评论分享功能

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

射流研究…代码：

//发表评论函数replayBox(box){ var文本区域=box。getelementsbytagname('文本区域')[0]；var list=box。getelementsbyclassname(' comment-list ')[0]；var div=文档。创建元素(' div ')；div。类名=' comment-box clear fix '；div.setAttribute('user '，' self ')；var html=' img src=' http : images/my。jpg ' class=' my head ' alt=' '/' div class=' comment-content ' ' ' p class=' comment-text ' span class=' user '我：/span "文本区域。value/p " p " class=" comment-time " " GetTime()" a href=" JAVAScript :"rel='外部无跟随' rel='外部无跟随' class=' comment-result ' total=' 0 ' my=' 0 ' style=' '赞/a " a href=" JAVAScript :" rel='外部不跟随' rel='外部不跟随' class=' comment-operate '删除/a ' '/p ' '/div '；div.innerHTML=htmllist。append child(div)；textarea.value=文本区域。onb lur()；函数getTime(){ var t=new Date()；var y=t . GetFullyear()；var m=t . get month()1；//月份是从0开始var d=t . GetDay()；var h=t . get hours()；var mi=t . GetMinutes()；m=m10？m: ' 0 ' md=d10？d: ' 0 ' dh=h10？h: ' 0 ' hmi=mi10？mi :“0”mi；返回y '-' m '-' d ' h ' : ' mi；} }5)实现点赞回复功能

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

射流研究…代码：

//点赞回复函数praiseReplay(El){ var oldTotal=parsent(El。GetAttribute(' total ')；var my=ParSeint(El。GetAttribute(' my ')；定义变量牛顿=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)？' :牛顿'赞；} el.style.display=(newTotal==0)？":"内联块；}6)实现回复列表中内容的删除和回复功能

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

射流研究…代码：

//函数操作替换(El){ var comment box=El。父节点。父节点。父节点；//云娥var框=注释框。父节点。父节点。父节点；//云娥var textarea=box。getelement sbytagnname(' text area ')[0]；var user=注释框。getelement sbyclasname(' user ')[0]；var txt=el.innerHTML:if(txt==)你好){ textarea。Ono cus()；textarea.value='你好用户。innerhtmltextarea。onkeyup():} else { remove node(El。父节点。父节点。父节点)；} }云娥与云娥同在JavaScript(JavaScript)阿琼阿琼阿琼阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉，吴亚玲吴亚玲，(中文),是不是。范仲淹！范仲淹！范仲淹！范仲淹！范仲淹！