<!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 i = 1; 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+"<br/><br/> "+i+"楼"; container.insertBefore(commentItem,response); commentForm.style.display = "none"; response.style.display = "block"; comment.value = ""; i++; }) </script> </body> </html>
这是这次考试的机试代码。
时间： 2024-11-02 15:09:59