这是一个制作贴吧回复的基本代码；
| <!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 = " "+comment.value; | |
| container.insertBefore(commentItem,response); | |
| commentForm.style.display = "none"; | |
| response.style.display = "block"; | |
| comment.value = ""; | |
| }) | |
| </script> | |
| </body> | |
| </html> | |
时间： 2024-12-10 20:15:08