制作一个类似贴吧回复

这是一个制作贴吧回复的基本代码；

 

 

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
  margin: 0;
  padding: 0;
  }
  #container{
  width: 500px;
  border: 1px solid;
  margin: 10px;
  }
  #topic{
  text-indent: 70px;
  font-size: 22px;
  padding: 20px 0;
  border-bottom: 2px solid grey;
  }
  #response{
  text-align: right;
  padding: 5px;
  }
  .txtArea{
  width: 480px;
  margin: 0 auto;
  }
  textarea{
  width: 480px;
  }
  button{
  margin-left: 460px;
  margin-bottom: 5px;
  }
  #commentForm{
  margin-top: 10px;
  display: none;
  }
   
  </style>
  </head>
  <body>
  <div id="container">
  <div>老师说：</div>
  <div id="topic">今天考试客户端</div>
  <div id="response"><a href="javascript:void(0)" id="responseBtn">回复</a></div>
  <form action="" id="commentForm">
  <div class="txtArea"><textarea name="" id="comment" cols="30" rows="10"></textarea></div>
  <div><button id="commentBtn">评论</button></div>
  </form>
  </div>
  <script>
   
  var container = document.getElementById("container");
  var responseBtn = document.getElementById("responseBtn");
  var response = document.getElementById("response");
  var commentForm = document.getElementById("commentForm");
  var commentBtn = document.getElementById("commentBtn");
  var comment = document.getElementById("comment");
  var topic = document.getElementById("topic");
  responseBtn.addEventListener("click",function(){
  commentForm.style.display = "block";
  response.style.display = "none";
  });
  commentBtn.addEventListener("mousedown",function(){
  var commentItem = document.createElement("div");
  commentItem.style.padding = "10px 0";
  commentItem.style.borderBottom = "2px solid grey";
  commentItem.innerHTML = "&nbsp;"+comment.value;
  container.insertBefore(commentItem,response);
  commentForm.style.display = "none";
  response.style.display = "block";
  comment.value = "";
  })
  </script>
  </body>
  </html>
   

posted on 2017-03-26 23:22  小小的西红柿  阅读(142)  评论(0)    收藏  举报

导航