9-1 编程挑战
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程挑战

小伙伴们，根据所学知识，使用JS实现案例中的人人网评论功能

效果图:

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能。

任务安排:

一、定义删除节点函数removeNode。

提示:
1. 函数接受一个参数，及需要参数的节点。

二、定义赞分享函数praiseBox。

提示:
   1.接受2个参数，一个是分享内容的容器，一个是点击的元素。
   2.获取显示分享条数结果的节点、当前分享数当前点击元素的文本。
   3. 如果当前点击酸雾文本为“赞”，增加赞，并更新相关元素的内容，反之，减少赞。
注意：自定义属性的读取和写入。

三、定义格式化日期函数getTime。

提示:
   1.new一个日期对象。
   2.分别调用获取年月日时分的方法，保存在相应变量。
   3. 拼接成特定格式的日期字符串。
注意：月份从0开始，对小于10的数字前面补0。

四、定义发表评论函数replayBox。

提示:
  1.获取输入框内容。
  2.获取评论列表根元素。
  3. 创建新元素并设置相关属性。
  4. 拼接新元素的innerHTML并写入。
  5. 把新元素评添加到论列表根元素。
  6. 清空输入框，并使其失去焦点
注意：拼接HTML时，调用时期格式化函数获取当前时期。

五、定义赞回复函数praiseReply。

提示:
  1.接受1个参数，是回复节点的根元素。
  2.获取当前赞总数，以及我的赞数。
  3.根据我是否赞过，更新根元素显示状态。
六、定义操作回复函数operateReply。

提示:
  1.接受一个参数，为点击的元素。
  2.如果元素内容是“回复”，则赞开输入框，并更新输入框的value。
  3. 如果是删除，则删除回复内容的根节点。
注意：输入框事件的手动触发。

七、遍历每个分享li，绑定事件。

1）在li上绑定点击事件代理

提示:
   1.获取触发元素，取得class。
   2.根据class调用不同的函数。
注意：IE下event对象存在window下。

2）绑定输入框事件

提示:
  1.获取输入框元素。
  2.绑定onfocus，展开输入框。
  3.绑定onblur， 收起输入框。
  4.绑定onkeyup, 实时计算字数，更新按钮状态。

任务

 

 

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>人人网评论</title>
  5.     <meta charset="utf-8">
  6.     <style type="text/css">
  7.         body { font-size: 12px; line-height: 120%; text-align: center; color:#333; padding: 20px;}
  8.         li { list-style: none}
  9.         a { color: #333; text-decoration: none;}
  10.         a:hover { text-decoration: underline;}
  11.         * { margin: 0; padding: 0; border: none;}
  12.         .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden}
  13.         .clearfix { *height:1%;}
  14.         #list { margin: 0 auto; text-align: left; width: 540px;}
  15.         .box { border-top: 1px solid #eee; position: relative;  width: 540px; padding: 20px 0}
  16.         .box:hover .close { display: block;}
  17.         .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;}
  18.         .close:hover { background: #c8d2e2; text-decoration: none;}
  19.         .head { float: left; width: 60px; height: 60px; margin-right: 10px;}
  20.         .content { float: left; width: 440px;}
  21.         .main { margin-bottom: 10px;}
  22.         .txt { margin-bottom: 10px;}
  23.         .user { color: #369; }
  24.         .pic { margin-right: 5px; width: 200px; border: 1px solid #eee;}
  25.         .info { height: 20px; line-height: 19px; font-size: 12px; margin: 0 0 10px 0;}
  26.         .info .time { color: #ccc; float: left; height: 20px; padding-left: 20px; background: url("images/bg1.jpg") no-repeat left top;}
  27.         .info .praise { color: #369; float: right; height: 20px; padding-left: 18px; background: url("images/bg2.jpg") no-repeat left top;}
  28.         .info .praise:hover { text-decoration: underline; background: url("images/bg3.jpg") no-repeat left top;}
  29.         .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;}
  30.         .comment-box { padding: 10px 0; border-top: 1px solid #eee;}
  31.         .comment-box:hover { background: rgb(247, 247, 247);}
  32.         .comment-box .myhead { float: left; width: 30px; height: 30px; margin-right: 10px;}
  33.         .comment-box .comment-content { float: left; width: 400px; }
  34.         .comment-box .comment-content .comment-time { color: #ccc; margin-top: 3px; line-height: 16px; position: relative;}
  35.         .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;}
  36.         .comment-box .comment-content .comment-operate { display: none; color: #369; height: 20px;  position: absolute; bottom: 0px; right: 10px;}
  37.         .comment-box .comment-content:hover .comment-praise { display: inline-block;}
  38.         .comment-box .comment-content:hover .comment-operate { display: inline-block;}
  39.         .text-box .comment { border: 1px solid #eee; display: block; height: 15px; width: 428px; padding: 5px; resize: none; color: #ccc}
  40.         .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;}
  41.         .text-box .btn-off { border: 1px solid #ccc; color: #ccc; background: #F7F7F7;}
  42.         .text-box .word{ display: none; float: right; margin: 7px 10px 0 0; color: #666;}
  43.         .text-box-on .comment{ height: 50px; color: #333;}
  44.         .text-box-on .btn{ display: inline;}
  45.         .text-box-on .word{ display: inline;}
  46.     </style>
  47.     <script type="text/javascript">
  48.         window.onload= function () {
  49.             var list = document.getElementById('list');
  50.             var lis = list.children;
  51.             var timer;
  52.  
  53.             // 定义删除节点函数removeNode
  54.  
  55.  
  56.             //定义赞分享函数praiseBox
  57.  
  58.  
  59.             //定义格式化日期函数getTime
  60.  
  61.  
  62.             //定义发表评论函数replayBox
  63.  
  64.  
  65.             //定义赞回复函数praiseReply
  66.  
  67.  
  68.             //定义操作回复函数operateReply
  69.  
  70.  
  71.             // 遍历每个分享li，绑定事件
  72.  
  73.  
  74.  
  75.  
  76.  
  77.         }
  78.     </script>
  79. </head>
  80. <body>
  81. <ul id="list">
  82.     <li class="box clearfix">
  83.         <a class="close" href="javascript:;">×</a>
  84.         <img class="head" src="http://img1.sycdn.imooc.com//536b4ad10001c94f00620060.jpg" alt=""/>
  85.         <div class="content">
  86.             <div class="main">
  87.                 <p class="txt">
  88.                     <span class="user">Andy：</span>轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。
  89.                 </p>
  90.                 <img class="pic" src="http://img1.sycdn.imooc.com//536b4aec0001a70f01960228.jpg" alt=""/>
  91.             </div>
  92.             <div class="info clearfix">
  93.                 <span class="time">02-14 23:01</span>
  94.                 <a class="praise" href="javascript:;">赞</a>
  95.             </div>
  96.             <div class="praises-total" total="4" style="display: block;">4个人觉得很赞</div>
  97.             <ul class="comment-list">
  98.                 <li class="comment-box clearfix" user="self">
  99.                     <img class="myhead" src="http://img1.sycdn.imooc.com//536b4b050001b06c00310030.jpg" alt=""/>
  100.                     <div class="comment-content">
  101.                         <p class="comment-text"><span class="user">我：</span>写的太好了。</p>
  102.                         <p class="comment-time">
  103.                             2014-02-19 14:36
  104.                             <a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1 赞</a>
  105.                             <a href="javascript:;" class="comment-operate">删除</a>
  106.                         </p>
  107.                     </div>
  108.                 </li>
  109.             </ul>
  110.             <div class="text-box">
  111.                 <textarea class="comment" autocomplete="off">评论…</textarea>
  112.                 <button class="btn ">回 复</button>
  113.                 <span class="word"><span class="length">0</span>/140</span>
  114.             </div>
  115.         </div>
  116.     </li>
  117.     <li class="box clearfix">
  118.         <a class="close" href="javascript:;">×</a>
  119.         <img class="head" src="http://img1.sycdn.imooc.com//536b4ad10001c94f00620060.jpg" alt=""/>
  120.         <div class="content">
  121.             <div class="main">
  122.                 <p class="txt">
  123.                     <span class="user">人在旅途：</span>三亚的海滩很漂亮。
  124.                 </p>
  125.                 <img class="pic" src="http://img1.sycdn.imooc.com//536b4aec0001a70f01960228.jpg" alt=""/>
  126.             </div>
  127.             <div class="info clearfix">
  128.                 <span class="time">02-14 23:01</span>
  129.                 <a class="praise" href="javascript:;">赞</a>
  130.             </div>
  131.             <div class="praises-total" total="0" style="display: none;"></div>
  132.             <ul class="comment-list">
  133.                 <li class="comment-box clearfix" user="other">
  134.                     <img class="myhead" src="http://img1.sycdn.imooc.com//536b4b050001b06c00310030.jpg" alt=""/>
  135.                     <div class="comment-content">
  136.                         <p class="comment-text"><span class="user">老鹰：</span>我也想去三亚。</p>
  137.                         <p class="comment-time">
  138.                             2014-02-19 14:36
  139.                             <a href="javascript:;" class="comment-praise" total="0" my="0">赞</a>
  140.                             <a href="javascript:;" class="comment-operate">回复</a>
  141.                         </p>
  142.                     </div>
  143.                 </li>
  144.             </ul>
  145.             <div class="text-box">
  146.                 <textarea class="comment" autocomplete="off">评论…</textarea>
  147.                 <button class="btn ">回 复</button>
  148.                 <span class="word"><span class="length">0</span>/140</span>
  149.             </div>
  150.         </div>
  151.     </li>
  152.     <li class="box clearfix">
  153.         <a class="close" href="javascript:;">×</a>
  154.         <img class="head" src="http://img1.sycdn.imooc.com//536b4ad10001c94f00620060.jpg" alt=""/>
  155.         <div class="content">
  156.             <div class="main">
  157.                 <p class="txt">
  158.                     <span class="user">小Y：</span>英国艺术家 Jane Perkins 能利用很多不起眼的东西进行创作，甚至是垃圾。首饰、纽扣、玩具等等都可以作为他创作的工具并创作出惟妙惟肖的画作，丝毫不逊色于色彩丰富的颜料。
  159.                 </p>
  160.             </div>
  161.             <div class="info clearfix">
  162.                 <span class="time">02-11 13:17</span>
  163.                 <a class="praise" href="javascript:;">赞</a>
  164.             </div>
  165.             <div class="praises-total" total="0" style="display: none;"></div>
  166.             <ul class="comment-list">
  167.  
  168.             </ul>
  169.             <div class="text-box">
  170.                 <textarea class="comment" autocomplete="off">评论…</textarea>
  171.                 <button class="btn ">回 复</button>
  172.                 <span class="word"><span class="length">0</span>/140</span>
  173.             </div>
  174.         </div>
  175.     </li>
  176. </ul>
  177. </body>
  178. </html>
返回课程