Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 留言板功能
Blogger Information
Blog 33
fans 0
comment 0
visits 18752
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
留言板功能
李玉峰
Original
567 people have browsed it

演示效果

HTML和JS代码

  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>留言板</title>
  8.     <link rel="stylesheet" href="msg.css" />
  9.   </head>
  10.   <body>
  11.     <div class="msg">
  12.       <div class="title">留言板</div>
  13.       <div class="input">
  14.         <input type="text" onkeydown="addMsg(this)" placeholder="请输入内容" autofocus />
  15.       </div>
  16.       <div class="content">
  17.         <h3>留言列表</h3>
  18.         <ul class="list"></ul>
  19.       </div>
  20.     </div>
  22.     <script>
  23.       function addMsg(ele) {
  24.         // console.log(event);
  25.         // console.log(event.key);
  26.         if (event.key === "Enter") {
  27.           // 1.获取显示留言的容器
  28.           const ul = document.querySelector(".list");
  29.           // 2.判断用户留言是否为空
  30.           if (ele.value.trim().length === 0) {
  31.             alert("留言不能为空");
  32.             ele.focus();
  33.             return false;
  34.           }
  35.           // 3.添加一条新留言
  36.           const li = document.createElement("li");
  37.           //   console.log(ele.value);
  38.           //   li.textContent = ele.value;
  39.           li.innerHTML = ele.value + "<button onclick = 'del(this.parentNode)'>删除</button>";
  40.           //   ul.append(li);
  41.           //   if (ul.firstElementChild !== null) {
  42.           //     ul.firstElementChild.before(li);
  43.           //   } else {
  44.           //     ul.append(li);
  45.           //   }
  46.           //   简洁写法
  47.           ul.insertAdjacentElement("afterBegin", li);
  49.           // 4.清空上一条留言
  50.           ele.value = null;
  51.           // 5.焦点重置
  52.           ele.focus();
  53.         }
  54.       }
  55.       //   删除
  56.       function del(ele) {
  57.         console.log(ele);
  58.         // 删除1
  59.         // ele.remove();
  60.         // 删除2
  61.         // ele.outerHTML = null;
  62.         // 判断
  63.         // if (confirm("是否删除?")) {
  64.         //   ele.remove();
  65.         // } else {
  66.         //   return false;
  67.         // }
  68.         // 简化判断
  69.         return confirm("是否删除?") ? ele.remove() : false;
  70.       }
  71.     </script>
  72.   </body>
  73. </html>

CSS代码

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   text-decoration: none;
  8.   color: #555;
  9. }
  10. li {
  11.   list-style: none;
  12. }
  13. .msg {
  14.   width: 600px;
  15.   margin: 50px auto;
  16.   background-color: white;
  17.   border-radius: 5px;
  18. }
  19. .title {
  20.   width: 100%;
  21.   height: 50px;
  22.   line-height: 50px;
  23.   padding: 0 40px;
  24.   background-color: #0b72c0;
  25.   color: #fff;
  26.   font-size: 20px;
  27.   text-align: center;
  28.   border-top-left-radius: 5px;
  29.   border-top-right-radius: 5px;
  30. }
  31. .input input[type="text"] {
  32.   width: 100%;
  33.   height: 35px;
  34.   border: 1px #e5e5e5 solid;
  35.   margin: 10px 0 20px 0;
  36.   text-indent: 10px;
  37.   font-size: 14px;
  38.   color: #333;
  39. }
  40. .content .list {
  41.   margin: 10px;
  42.   text: size 15px;
  43.   border: 1px solid #888;
  44. }
  45. .content .list li {
  46.   margin: 10px;
  47. }
  48. .content .list li button {
  49.   margin-left: 15px;
  50. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
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