                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /人人網評論功能

分享代碼！

<!DOCTYPE?html><html><head>
????<title>人人網評論</title>
????????<meta?charset="utf-8">
????????????<style?type="text/css">
????????????????????body?{?font-size:?12px;?line-height:?120%;?text-align:?center;?color:#333;?padding:?20px;}
????????????????????li?{?list-style:?none}????????
????????????????????a?{?color:?#333;?text-decoration:?none;}????????
????????????????????a:hover?{?text-decoration:?underline;}????????
????????????????????*?{?margin:?0;?padding:?0;?border:?none;}???????
?????????????????????.clearfix:after?{?content:".";?display:block;?height:0;?clear:both;?visibility:hidden}????????
?????????????????????.clearfix?{?*height:1%;}????????
?????????????????????#list?{?margin:?0?auto;?text-align:?left;?width:?540px;}????????
?????????????????????.box?{?border-top:?1px?solid?#eee;?position:?relative;??width:?540px;?padding:?20px?0}????????
?????????????????????.box:hover?.close?{?display:?block;}????????
?????????????????????.close?{?display:?none;?top:0px;?right:?0px;?width:?28px;?height:?28px;?border:?1px?solid?#eee;?position:?absolute;?background:?#f2f4f7;?line-height:?27px;?text-align:?center;}????????.close:hover?{?background:?#c8d2e2;?text-decoration:?none;}????????.head?{?float:?left;?width:?60px;?height:?60px;?margin-right:?10px;}????????.content?{?float:?left;?width:?440px;}????????.main?{?margin-bottom:?10px;}????????.txt?{?margin-bottom:?10px;}????????.user?{?color:?#369;?}????????.pic?{?margin-right:?5px;?width:?200px;?border:?1px?solid?#eee;}????????.info?{?height:?20px;?line-height:?19px;?font-size:?12px;?margin:?0?0?10px?0;}????????.info?.time?{?color:?#ccc;?float:?left;?height:?20px;?padding-left:?20px;?background:?url("images/bg1.jpg")?no-repeat?left?top;}????????.info?.praise?{?color:?#369;?float:?right;?height:?20px;?padding-left:?18px;?background:?url("images/bg2.jpg")?no-repeat?left?top;}????????.info?.praise:hover?{?text-decoration:?underline;?background:?url("images/bg3.jpg")?no-repeat?left?top;}????????.praises-total?{?margin:?0?0?10px?0;?height:?20px;?background:?url("images/praise.png")?no-repeat?5px?5px?rgb(247,?247,?247);?padding:?5px?0?5px?25px;?line-height:?19px;}????????.comment-box?{?padding:?10px?0;?border-top:?1px?solid?#eee;}????????.comment-box:hover?{?background:?rgb(247,?247,?247);}????????.comment-box?.myhead?{?float:?left;?width:?30px;?height:?30px;?margin-right:?10px;}????????.comment-box?.comment-content?{?float:?left;?width:?400px;?}????????.comment-box?.comment-content?.comment-time?{?color:?#ccc;?margin-top:?3px;?line-height:?16px;?position:?relative;}????????.comment-box?.comment-content?.comment-praise?{?display:?none;?color:?#369;?padding-left:?17px;?height:?20px;?background:?url("images/praise.png")?no-repeat;??position:?absolute;?bottom:?0px;?right:?44px;}????????.comment-box?.comment-content?.comment-operate?{?display:?none;?color:?#369;?height:?20px;??position:?absolute;?bottom:?0px;?right:?10px;}????????.comment-box?.comment-content:hover?.comment-praise?{?display:?inline-block;}????????.comment-box?.comment-content:hover?.comment-operate?{?display:?inline-block;}????????.text-box?.comment?{?border:?1px?solid?#eee;?display:?block;?height:?15px;?width:?428px;?padding:?5px;?resize:?none;?color:?#ccc}????????.text-box?.btn?{?font-size:?12px;?font-weight:?bold;?display:?none;?float:?right;?width:?65px;?height:?25px;?border:?1px?solid?#0C528D;?color:?#fff;?background:?#4679AC;}????????.text-box?.btn-off?{?border:?1px?solid?#ccc;?color:?#ccc;?background:?#F7F7F7;}????????.text-box?.word{?display:?none;?float:?right;?margin:?7px?10px?0?0;?color:?#666;}????????.text-box-on?.comment{?height:?50px;?color:?#333;}????????.text-box-on?.btn{?display:?inline;}????????.text-box-on?.word{?display:?inline;}????</style>????<script?type="text/javascript">????????window.onload=?function?()?{????????????var?list?=?document.getElementById('list');????????????var?lis?=?list.children;????????????var?timer;????????????//?定義刪除節點函數removeNode????????????function?removeNode(node){???????????????node.parentNode.removeChild(node);????????????}????????????//定義贊分享函數praiseBox????????????function?praiseBox(lis,el){????????????????var?showNum?=?lis.getElementsByClassName("praises-total")[0];????????????????var?oldNum?=?parseInt(showNum.getAttribute("total"));????????????????var?newNum?;????????????????if(el.innerHTML?==?"贊"){????????????????????newNum?=?oldNum?+?1;????????????????????showNum.innerHTML?=?(newNum?==?1)???"我覺得很贊"?:?"我和其他"?+?newNum+?"覺得很贊";????????????????????el.innerHTML?=?"取消贊";????????????????}else{????????????????????el.innerHTML?=?"贊";????????????????????newNum?=?oldNum?-?1;????????????????????showNum.innerHTML?=?(newNum?==?1)???""?:??newNum+?"覺得很贊";????????????????}????????????????showNum.style.display?=?(newNum?>=?1)???"block"?:?"none";????????????????showNum.setAttribute("total",newNum);????????????}????????????????????????//定義格式化日期函數getTime????????????function?getTime(){????????????????var?time?=?new?Date();????????????????var?year?=?time.getFullYear();????????????????var?month?=?(time.getMonth()+1)?>?10???time.getMonth()+1?:?"0"+(time.getMonth()+1);????????????????var?date?=?time.getDate()?>?10???time.getDate()?:?"0"?+?time.getDate();????????????????var?hour?=?time.getHours()?>?10???time.getHours()?:?"0"?+?time.getHours();????????????????var?minute=?time.getMinutes()?>?10???time.getMinutes()?:?"0"?+?time.getMinutes();????????????????return?"?"+year?+"-"+?month?+"-"+?date?+"?"+?hour?+":"+minute;?????????????}????????????????????????//定義發表評論函數replayBox????????????function?replayBox(el){????????????????var?text?=?el.getElementsByTagName("textarea")[0];????????????????var?ul?=?el.getElementsByClassName("comment-list")[0];????????????????var?li?=?document.createElement("li");????????????????li.setAttribute("user","self");????????????????li.className?=?"comment-box?clearfix";????????????????var?html?=??'<img?class="myhead"?src="http://img1.sycdn.imooc.com//536b4b050001b06c00310030.jpg"?alt=""/>'+????????????????????????????'<div?class="comment-content">'+????????????????????????????'<p?class="comment-text"><span?class="user">我：</span>'+text.value+'</p>'+????????????????????????????'<p?class="comment-time">'+????????????????????????????getTime()+????????????????????????????'<a?href="javascript:;"?class="comment-praise"?total="1"?my="0"?style="display:?inline-block">贊</a>'+????????????????????????????'<a?href="javascript:;"?class="comment-operate">刪除</a>'+????????????????????????????'</p>'+????????????????????????????'</div>';????????????????li.innerHTML?=?html;????????????????ul.append(li);????????????????text.value?=?"";????????????????text.onblur();????????????????????????????}????????????????????????//定義贊回復函數praiseReply????????????function?pariseReply(el){????????????????var?oldTotal?=?parseInt(el.getAttribute("total"));????????????????var?my?=?el.getAttribute("my");????????????????var?newTotal;????????????????if(my?==?"0"){????????????????????newTotal?=?oldTotal?+?1;????????????????????el.innerHTML?=??newTotal?+?"?取消贊";????????????????????el.setAttribute("my","1");????????????????}else{????????????????????newTotal?=?oldTotal?-?1;????????????????????el.innerHTML?=?(newTotal?==?0)???"贊"?:?newTotal?+?"?贊";????????????????????el.setAttribute("my","0");????????????????}????????????????el.setAttribute("total",newTotal);????????????????el.style.display?=?(newTotal?==?0)???""?:?"block";????????????}????????????????????????//定義操作回復函數operateReply????????????function?operateReply(box,el){????????????????var?text?=?box.getElementsByTagName("textarea")[0];????????????????var?user?=?el.parentNode.parentNode.getElementsByClassName("user")[0];????????????????var?textBox?=?box.getElementsByClassName("text-box")[0];????????????????console.log(box);????????????????if(el.innerHTML?==?"刪除"){????????????????????removeNode(el.parentNode.parentNode.parentNode);????????????????}else?if(el.innerHTML?==?"回復"){????????????????????text.value?=?"@"+user.innerHTML;????????????????????textBox.className?=?"text-box?text-box-on";????????????????}????????????}????????????//?遍歷每個分享li，綁定事件???????????for(var?i?=?0;?i?<?lis.length;?i++){????????????????lis[i].onclick?=?function?(e){????????????????????e?=?e?||?window.event;????????????????????var?el?=?e.srcElement;????????????????????switch(el.className){????????????????????????case?"close":????????????????????????????removeNode(el.parentNode);????????????????????????????break;????????????????????????case?"praise":????????????????????????????praiseBox(el.parentNode.parentNode,el);????????????????????????????break;????????????????????????case?"btn?btn-off":????????????????????????????clearTimeout(timer);?????????????????????????????break;????????????????????????case?"btn?":????????????????????????????replayBox(el.parentNode.parentNode.parentNode);????????????????????????????break;????????????????????????case?"comment-operate":????????????????????????????operateReply(el.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode,el);????????????????????????????break;????????????????????????case?"comment-praise":????????????????????????????pariseReply(el);????????????????????????????break;????????????????????}????????????????}????????????????var?text?=?lis[i].getElementsByTagName("textarea")[0];????????????????text.onfocus?=?function?(){????????????????????this.parentNode.className?=?"text-box?text-box-on";????????????????????this.onkeyup();????????????????}????????????????text.onblur?=?function?(){????????????????????var?me?=?this;????????????????????if(me.value?==?""){????????????????????????timer?=?setTimeout(function(){????????????????????????????me.parentNode.className?=?"text-box";????????????????????????},400)????????????????????}????????????????}????????????????text.onkeyup?=?function(){????????????????????var?length?=?this.parentNode.getElementsByClassName("length")[0];????????????????????var?btn?=?this.parentNode.getElementsByClassName("btn")[0];????????????????????btn.className?=?(this.value.length==0)???"btn?btn-off"?:?"btn?";????????????????????length.innerHTML?=?this.value.length;????????????????}???????????}????????}????</script></head><body><ul?id="list">????<li?class="box?clearfix">????????<a?class="close"?href="javascript:;">×</a>????????<img?class="head"?src="http://img1.sycdn.imooc.com//536b4ad10001c94f00620060.jpg"?alt=""/>????????<div?class="content">????????????<div?class="main">????????????????<p?class="txt">????????????????????<span?class="user">Andy：</span>輕輕的我走了，正如我輕輕的來；我輕輕的招手，作別西天的云彩。????????????????</p>????????????????<img?class="pic"?src="http://img1.sycdn.imooc.com//536b4aec0001a70f01960228.jpg"?alt=""/>????????????</div>????????????<div?class="info?clearfix">????????????????<span?class="time">02-14?23:01</span>????????????????<a?class="praise"?href="javascript:;">贊</a>????????????</div>????????????<div?class="praises-total"?total="4"?style="display:?block;">4個人覺得很贊</div>????????????<ul?class="comment-list">????????????????<li?class="comment-box?clearfix"?user="self">????????????????????<img?class="myhead"?src="http://img1.sycdn.imooc.com//536b4b050001b06c00310030.jpg"?alt=""/>????????????????????<div?class="comment-content">????????????????????????<p?class="comment-text"><span?class="user">我：</span>寫的太好了。</p>????????????????????????<p?class="comment-time">????????????????????????????2014-02-19?14:36????????????????????????????<a?href="javascript:;"?class="comment-praise"?total="1"?my="0"?style="display:?inline-block">1?贊</a>????????????????????????????<a?href="javascript:;"?class="comment-operate">刪除</a>????????????????????????</p>????????????????????</div>????????????????</li>????????????</ul>????????????<div?class="text-box">????????????????<textarea?class="comment"?autocomplete="off"?placeHolder?=?"評論…"></textarea>????????????????<button?class="btn?">回?復</button>????????????????<span?class="word"><span?class="length">0</span>/140</span>????????????</div>????????</div>????</li>????<li?class="box?clearfix">????????<a?class="close"?href="javascript:;">×</a>????????<img?class="head"?src="http://img1.sycdn.imooc.com//536b4ad10001c94f00620060.jpg"?alt=""/>????????<div?class="content">????????????<div?class="main">????????????????<p?class="txt">????????????????????<span?class="user">人在旅途：</span>三亞的海灘很漂亮。????????????????</p>????????????????<img?class="pic"?src="http://img1.sycdn.imooc.com//536b4aec0001a70f01960228.jpg"?alt=""/>????????????</div>????????????<div?class="info?clearfix">????????????????<span?class="time">02-14?23:01</span>????????????????<a?class="praise"?href="javascript:;">贊</a>????????????</div>????????????<div?class="praises-total"?total="0"?style="display:?none;"></div>????????????<ul?class="comment-list">????????????????<li?class="comment-box?clearfix"?user="other">????????????????????<img?class="myhead"?src="http://img1.sycdn.imooc.com//536b4b050001b06c00310030.jpg"?alt=""/>????????????????????<div?class="comment-content">????????????????????????<p?class="comment-text"><span?class="user">老鷹：</span>我也想去三亞。</p>????????????????????????<p?class="comment-time">????????????????????????????2014-02-19?14:36????????????????????????????<a?href="javascript:;"?class="comment-praise"?total="0"?my="0">贊</a>????????????????????????????<a?href="javascript:;"?class="comment-operate">回復</a>????????????????????????</p>????????????????????</div>????????????????</li>????????????</ul>????????????<div?class="text-box">????????????????<textarea?class="comment"?autocomplete="off"?placeHolder?=?"評論…"></textarea>????????????????<button?class="btn?">回?復</button>????????????????<span?class="word"><span?class="length">0</span>/140</span>????????????</div>????????</div>????</li>????<li?class="box?clearfix">????????<a?class="close"?href="javascript:;">×</a>????????<img?class="head"?src="http://img1.sycdn.imooc.com//536b4ad10001c94f00620060.jpg"?alt=""/>????????<div?class="content">????????????<div?class="main">????????????????<p?class="txt">????????????????????<span?class="user">小Y：</span>英國藝術家?Jane?Perkins?能利用很多不起眼的東西進行創作，甚至是垃圾。首飾、紐扣、玩具等等都可以作為他創作的工具并創作出惟妙惟肖的畫作，絲毫不遜色于色彩豐富的顏料。????????????????</p>????????????</div>????????????<div?class="info?clearfix">????????????????<span?class="time">02-11?13:17</span>????????????????<a?class="praise"?href="javascript:;">贊</a>????????????</div>????????????<div?class="praises-total"?total="0"?style="display:?none;"></div>????????????<ul?class="comment-list">????????????</ul>????????????<div?class="text-box">????????????????<textarea?class="comment"?autocomplete="off"?placeHolder?=?"評論…"></textarea>????????????????<button?class="btn?">回?復</button>????????????????<span?class="word"><span?class="length">0</span>/140</span>????????????</div>????????</div>????</li></ul></body></html>