Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 留言板实战
Blogger Information
Blog 19
fans 0
comment 0
visits 9832
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
留言板实战
newbie
Original
601 people have browsed it

效果图

代码

  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.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.         /* border: 1px solid red; */
  14.       }
  15.       li {
  16.         list-style: none;
  17.       }
  18.       .ground {
  19.         display: grid;
  20.         grid-template-columns: repeat(2, 1fr);
  22.         place-items: center;
  23.       }
  24.       .ban {
  25.         background-color: aqua;
  26.         width: 490px;
  27.         height: 500px;
  28.         display: grid;
  29.         grid-template-rows: repeat(2, 2fr);
  30.         place-items: center;
  31.       }
  32.       .windows {
  33.         background-color: aquamarine;
  34.         width: 490px;
  35.         height: 500px;
  36.       }
  37.       ul {
  38.         position: relative;
  39.       }
  41.       input {
  42.         padding: 60px;
  43.         height: 100px;
  44.         width: 400px;
  45.         border-radius: 5px;
  46.         outline: none;
  47.       }
  48.       button {
  49.         width: 20px;
  50.         height: 20px;
  51.         font-size: 15px;
  52.         line-height: 15px;
  53.         text-align: center;
  54.         border-radius: 50%;
  55.         background-color: mediumvioletred;
  56.         position: absolute;
  57.         right: 0;
  58.       }
  59.     </style>
  60.   </head>
  61.   <body>
  62.     <div class="ground">
  63.       <div class="ban">
  64.         <input
  65.           type="text"
  66.           placeholder="请输入留言"
  67.           ds
  68.           onkeydown="addMsg(this)"
  69.           autofocus
  70.         />
  71.         <hr style="width: 100%" />
  72.         <div class="zhanshi">
  73.           <ul class="list" style="width: 485px; height: 365px"></ul>
  74.         </div>
  75.       </div>
  76.       <div class="windows"></div>
  77.     </div>
  78.     <script>
  79.       function addMsg(ele) {
  80.         if (event.key === "Enter") {
  81.           let ul = document.querySelector(".list"); //获取ul元素
  82.           if (ele.value.trim().length === 0) {
  83.             //判断内容是否为空。trim方法可以去除字符串中的空格
  84.             alert("不能为空");
  85.             ele.focus();
  86.             return false;
  87.           }
  88.           const li = document.createElement("li");
  89.           li.innerHTML =
  90.             ele.value +
  91.             `<button onclick = "del(this.parentNode)">x</button><hr>`; //添加一个删除按钮
  92.           ul.insertAdjacentElement("afterBegin", li); //在上条留言上部插入一条留言
  93.           ele.value = null; //清空输入框
  94.           ele.focus(); //重置焦点
  95.         }
  96.       }
  97.       function del(ele) {
  98.         return confirm("是否删除本条留言?") ? ele.remove() : false;//判断是继续执行清除本元素的命令
  99.       }
  100.     </script>
  101.   </body>
  102. </html>
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