欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

一个简单的留言板

程序员文章站 2022-05-08 10:48:01
...

一个简单的留言板

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <input
    11. 

  11.       type="text"
    12. 

  12.       onkeydown="addMsg(this)"
    13. 

  13.       placeholder="请输入留言内容"
    14. 

  14.       autofocus
    15. 

  15.     />
    16. 

  16.     <ul class="list"></ul>
    17. 

  17.     <script>
    18. 

  18.       function addMsg(ele) {
    19. 

  19.         console.log(ele);
    20. 

  20.         console.log(event);
    21. 

  21.         if (event.key === "Enter") {
    22. 

  22.           const ul = document.querySelector(".list");
    23. 

  23.           if (ele.value.length === 0) {
    24. 

  24.             alert("can not null");
    25. 

  25.             ele.focus();
    26. 

  26.             return false;
    27. 

  27.           }
    28. 

  28.           const li = document.createElement("li");
    29. 

  29.           li.innerHTML =
    30. 

  30.             ele.value +
    31. 

  31.             "&nbsp&nbsp&nbsp<button onclick='del(this.parentNode)'>删除</button>";
    32. 

  32.           //   ul.append(li);
    33. 

  33.           ul.insertAdjacentElement("afterbegin", li);
    34. 

    35. 

  35.           ele.value = null;
    36. 

  36.           ele.focus();
    37. 

  37.         }
    38. 

  38.       }
    39. 

    40. 

  40.       function del(ele) {
    41. 

  41.         // if (confirm("真的要删？")) {
    42. 

  42.         //   ele.remove();
    43. 

  43.         //   // ele.outerHTML = null;   //这种方式也可以删除
    44. 

  44.         // }
    45. 

  45.         confirm("真的要删除？") ? ele.remove() : false;
    46. 

  46.       }
    47. 

  47.     </script>
    48. 

  48.   </body>
    49. 

  49. </html>
    50.

一个简单的留言板

上一篇： 1220作业

下一篇： JQuery each()函数如何优化循环DOM结构的性能_jquery

推荐阅读