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

一个简单的留言板

程序员文章站 2022-04-21 10:51:45
...

一个简单的留言板

    

  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.

一个简单的留言板

上一篇： js中的firstElementChild，lastElementChild，parentNode等属性

下一篇： 一个登录框 + 用JS取表单中的元素

推荐阅读