简易留言板

<!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>留言板</title>
  </head>
  <style>
    :root {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      width: 450px;
      position: fixed;
    }
    .box fieldset {
      background-color: lightseagreen;
      height: 300px;
      padding: 20px 30px;
      outline: none;
      border: 1px solid #ddd;
    }
    .box fieldset label {
      font-size: 18px;
      color: #fff;
    }
    .box fieldset legend {
      font-size: 16px;
      background-color: lightsalmon;
      color: white;
      padding: 8px 20px;
    }
    .box fieldset textarea {
      width: 450px;
      outline: none;
      border: 1px solid #ddd;
      margin: 10px auto;
    }
    .box fieldset button {
      border: none;
      background-color: lightsalmon;
      color: #fff;
      font-size: 16px;
      width: 100px;
      height: 30px;
      line-height: 30px;
      position: absolute;
      right: 20px;
      bottom: 20px;
      cursor: pointer;
    }
    .list {
      width: 500px;
      height: 326px;
      background-color: lightgreen;
      position: fixed;
      left: 540px;
    }
  </style>
  <script>
    function addMsg() {
      // 1.获取留言内容
      let msg = document.getElementById("yourMsgs");
      // 2.获取显示留言的容器
      const ul = document.querySelector('.list');
      // 3.判断用户留言是否为空
      if (msg.value.trim().length === 0){
        alert("留言不能为空");      
        msg.focus;
        //如果不用 return false 则会继续继续执行后面的代码，增加一个空节点
        return false; 
      }
      // 4.添加一条新留言
      const li = document.createElement('li');
      li.innerHTML = msg.value + '<button onclick="del(this.parentNode)">删除</button>';
      ul.insertAdjacentElement('afterBegin',li);
      // 5.将输入框中的前一条留言清空
      msg.value = null;
      // 6.重置输入框焦点
      msg.focus;
    }
    function del(ele){
        // ele.remove();   //也可以用  ele.outerHTML = null;
        return confirm("您确定删除该留言吗？") ? ele.remove(): false;
    }
    function myMsg(ele) {
      if (event.key === 'Enter'){
      // 1.获取显示留言的容器
        const ul = document.querySelector('.list');
        // 3.判断用户留言是否为空
        if (ele.value.trim().length === 0){
            alert("留言不能为空");      
            ele.focus;
            //如果不用 return false 则会继续继续执行后面的代码，增加一个空节点
            return false; 
        }
        // 4.添加一条新留言
        const li = document.createElement('li');
        li.innerHTML = ele.value + '<button onclick="del(this.parentNode)">删除</button>';
        ul.insertAdjacentElement('afterBegin',li);
        // 5.将输入框中的前一条留言清空
        ele.value = null;
        // 6.重置输入框焦点
        ele.focus;
      }
    }
  </script>
  <body>
    <div class="box">
      <fieldset>
        <legend>留言板</legend>
        <label for="yourMsgs">请输入您的留言</label>
        <textarea name="msgs" id="yourMsgs" onkeydown="myMsg(this)"  cols="30"  rows="10"  placeholder="请输入您的留言"  autofocus></textarea>
        <button onclick="addMsg()">提交留言</button>
      </fieldset>
    </div>
    <ul class="list"></ul>
  </body>
</html>
简易留言板
简易留言板

简易留言板

相关文章
