简易的创造一个留言板

  <div class="bacground">
        <div class="head">留言板</div>
        <input class="name" type="text" placeholder="请输入您的昵称">
        <textarea class="content" placeholder="请保持言论文明......"></textarea>
        <button class="btn">留言</button>
        <h3>大家在说</h3>
        <ul class="text">
       
        </ul>
      </div>
      <div class="popup">
        <div class="pop-content">
          <div class="pop-head">回复板</div>
          <textarea class="pop-reply" placeholder="请保持言论文明......"></textarea>
          <button class="pop-btn">回复</button>
        </div>
      </div>

下面是css的代码。

<style>
        * {
          padding: 0;
          margin: 0;
        }
      
        body {
          width: 100%;
          height: 100%;
          background: rgb(65, 65, 63);
        }
      
        .bacground {
          width: 700px;
          height: 100%;
          background: white;
          margin: auto;
          margin-top: 20px;
        }
      
        .head,
        .pop-head {
          height: 50px;
          font-size: 20px;
          text-align: center;
          line-height: 50px;
        }
      
        .name {
          width: 640px;
          height: 40px;
          font-size: 20px;
          margin: 10px 28px;
          line-height: 50px;
          border-radius: 8px;
          border: 2px solid rgb(139, 137, 137);
          outline: none;
        }
      
        .content,
        .pop-reply {
          width: 640px;
          height: 150px;
          font-size: 22px;
          margin: 10px 28px;
          border: 2px solid rgb(139, 137, 137);
          outline: none;
          border-radius: 8px;
          resize: none;
        }
      
        .btn,
        .pop-btn {
          float: right;
          height: 30px;
          margin-right: 28px;
          border-radius: 6px;
          outline: none;
          font-size: 20px;
          padding: 0 20px;
          background: rgb(169, 238, 255);
        }
      
        h3 {
          font-size: 20px;
          color: rgb(102, 102, 102);
          background: rgb(205, 221, 248);
          margin-top: 50px;
          line-height: 50px;
          text-indent: 30px;
          font-weight: 545;
        }
      
        li {
          list-style: none;
          width: 640px;
          font-size: 22px;
          margin: 15px 30px;
        }
      
        .message-head {
          display: flex;
        }
      
        .message-head .photo {
          width: 70px;
          height: 70px;
          background: rgb(6, 109, 134);
          display: inline-block;
          border-radius: 50%;
          text-align: center;
          line-height: 70px;
          overflow: hidden;
        }
      
        .message-head .time {
          margin-left: 12px;
        }
      
        .liuyan,
        .reply p {
          width: 560px;
          /* height: 76px; */
          line-height: 50px;
          display: block;
          background: rgb(205, 221, 248);
          font-size: 20px;
          margin-left: 80px;
          border-radius: 8px;
          text-indent: 15px;
        }
      
        .delete {
          width: 60px;
          height: 30px;
          display: block;
          line-height: 30px;
          margin-left: 580px;
          /* margin-bottom: 0px; */
          border-radius: 6px;
          outline: none;
          font-size: 15px;
          background: rgb(169, 238, 255);
        }
      
        .answer {
          width: 60px;
          height: 30px;
          display: block;
          line-height: 30px;
          margin-top: -29px;
          margin-left: 515px;
          border-radius: 6px;
          outline: none;
          font-size: 15px;
          background: rgb(169, 238, 255);
        }
      
        .popup {
          width: 100vw;
          height: 100vh;
          position: fixed;
          background: rgba(0, 0, 0, .3);
          left: 0;
          top: 0;
          z-index: 10;
          display: flex;
          align-items: center;
          justify-content: center;
          display: none;
        }
      
        .pop-content {
          width: 700px;
          background: #fff;
          border-radius: 10px;
          overflow: hidden;
          padding-bottom: 20px;
        }
      
        .reply p {
          margin-top: 10px;
          background: rgba(100, 100, 100, .1);
        }
      </style>;

下面是js的代码

 <script>
      //拿对象
      var oInp1 = document.querySelector(".name")
      var oCon = document.querySelector(".content")
      var btn = document.querySelector(".btn")
      var oText = document.querySelector(".text")
      var oPopup = document.querySelector(".popup")
      var oPopbtn = document.querySelector(".pop-btn")
      var oPopre = document.querySelector(".pop-reply")
      //委托事件，把点击事件委托给页面
      document.onclick = function (e) {
        //兼容写法
        var ev = event || e
        var target = ev.srcElement || ev.target
        //获取当前时间
        var date = new Date ()
        //设定时间，并用字符串拼接
        function time(date){
        var nian = date.getFullYear()
        var yue = date.getMonth()+1
        var ri = date.getDate()
        var shi = date.getHours()
        var fen = date.getMinutes()
        var miao = date.getSeconds()
        // var xing = date.getDay()
        return nian + "-" + yue  + "-" + ri + "-" + shi  + "." + fen  + "."+ miao 
      }
      //获取当前事件
        if (target.className == "btn") {
          //创造一个li
          var _li = document.createElement("li")
          //给li添加内容
           _li.innerHTML = `
            <div class="message-head">
              <span class="photo">${oInp1.value}</span>
              <p class="time">${time(date)}</p>
            </div>
            <p class="liuyan">${oCon.value}</p>
            <div class="reply">
            </div>
            <button class="delete">Delete</button>
            <button class="answer">Answer</button>
         `
         //在ul里面添加li
         oText.appendChild(_li)
        }
        //获取当前事件
        if(target.className == "answer"){
        //弹出回复框
        oPopup.style.display = "flex"
        //通过当前事件的父元素找到需要添加回复的盒子
        oReply = target.parentElement.querySelector(".reply")
      }
      //找到当前事件
      if (target.className == "delete") {
        //通过当前事件找到父元素，并移除
        target.parentElement.remove()
      }
      //找到当前事件
        if (target.className == "pop-btn") {
        //获取回复框的内容
        var res = oPopre.value
        //创造一个p标签
        var oP = document.createElement("p")
        //填入内容
        oP.innerHTML = res
        //改变回复框的样式 
        oPopup.style.display = "none"
        oReply.appendChild(oP)
        }
      }
     
    </script>

下面是代码实现之后的样子