留言板案例,添加CSS美化

留言板练习

<!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>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html {
      font: size 100px;
    }
    input {
      margin: 5px 0px 5px 25px;
      padding: 5px;
      width: 299px;
      height: 30px;
    }
    input:focus {
      background: #67e49f;
    }
    ul.list {
      width: 310px;
      border: 0.01px solid salmon;
      border-radius: 5px;
      margin-left: 20px;
    }
    ul.list > li {
      margin: 2px 5px;
      padding: 5px;
      width: 300px;
      height: 30px;
      background: #525252;
      color: #fcf8f8;
      border-radius: 5px;
      vertical-align: middle;
    }
    ul.list > li:hover {
      width: 300px;
      height: 30px;
      background: #cf6b6b;
      color: #fcf8f8;
      border-radius: 5px;
      vertical-align: middle;
    }
    ul.list > li button {
      float: right;
      width: 60px;
      background: #525252;
      border-radius: 5px;
      color: #fcf8f8;
    }
    ul.list > li button:hover {
      float: right;
      width: 60px;
      background: #67e49f;
      border-radius: 5px;
      color: #fcf8f8;
    }
  </style>
  <body>
    <input
      type="text"
      onkeydown="insertComment(this)"
      placeholder="请输入留言"
      autofocus
    />
    <ul class="list">
      <!-- 其实每一条新留言,应该添加到ul的起始标签的后面: afterbegin -->
    </ul>
    <script>
      const insertComment = function (ele) {
        // 只有按下回车键才提交
        if (event.key === "Enter") {
          // 1. 非空判断
          if (ele.value.length === 0) {
            // 提示用户
            alert("留言不能为空");
            // 重置焦点
            ele.focus();
            // 直接返回
            return false;
          }
          // 2. 添加留言
          const ul = document.querySelector(".list");
          ele.value += `<button onclick="del(this.parentNode)">删除</button>`;
          ul.insertAdjacentHTML("afterbegin", `<li>${ele.value}</li>`);
          // 3. 清空输入框
          ele.value = null;
        }
      };
      // 删除
      const del = function (ele) {
        return confirm("是否删除?") ? (ele.outerHTML = null) : false;
      };
    </script>
  </body>
</html>
留言板练习

相关文章
