Blogger Information
Blog 26
fans 0
comment 1
visits 10524
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
改写留言板案例,适当添加CSS美化
P粉751989631
Original
434 people have browsed it

改写留言板案例,适当添加CSS美化

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>todolist:留言板</title>
  8. </head>
  9. <body>
  10. <input type="text" onkeydown="insertComment(this)" placeholder="请输入留言" autofocus />
  11. <ul class="list"></ul>
  12. <script>
  13. const insertComment = function (ele) {
  14. // console.log(enent);
  15. // console.log(enent.type);
  16. //
  17. if (event.key === "Enter") {
  18. if (ele.value.length === 0) {
  19. alert("留言不能为空");
  20. ele.focus();
  21. return false;
  22. }
  23. const ul = document.querySelector(".list");
  24. ele.value += `<button onclick="del(this.parentNode)">删除</button>`;
  25. ul.insertAdjacentHTML("afterbegin", `<li>${ele.value}</li>`);
  26. ele.value = null;
  27. }
  28. };
  29. const del = function (ele) {
  30. return confirm("是否删除?") ? (ele.outerHTML = null) : false;
  31. };
  32. </script>
  33. </body>
  34. </html>

运行结果

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:整体效果实现了, 但是没有写css
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post