留言板（乞丐版）

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>todoList: 留言板</title>
    <link rel="stylesheet" href="css/demo1.css" />
  </head>
  <body>
    <header>
      <div class="head">
        <div class="logo">
          <img
            src="http://liuyan.people.com.cn/img/logo2.7914a084.png"
            alt=""
          />
        </div>
      </div>
    </header>
    <main>
      <textarea
        type="text"
        onkeydown="insertComment(this)"
        placeholder="请输入留言"
        autofocus
        cols="100"
        rows="8"
      ></textarea>
      <div class="downLine"></div>
      <ul class="list"></ul>
    </main>
    <script>
      const insertComment = function (ele) {
        if (event.key === "Enter") {
          if (ele.value.length === 0) {
            alert("留言不能为空");
            ele.focus();
            return false;
          }
          const ul = document.querySelector(".list");
          ele.value += `<button onclick ="del(this.parentNode)">删除</button>`;
          ul.insertAdjacentHTML("afterbegin", `<li>${ele.value}<hr></li>`);
          ele.value = null;
        }
      };
      const del = function (ele) {
        return confirm("是否删除？") ? (ele.outerHTML = null) : false;
      };
    </script>
  </body>
</html>
相关文章
