留言板效果实现

思路：

留言功能：点击留言 -> 获取昵称和留言内容 ->判断输入是否为空->有输入就留言成功-

>10s后再次留言

1. 获取元素   function $(selector) { return document.querySelector(selector) }

2. 绑定点击事件（点击留言）

2.1 先清除昵称和内容的首尾空格 var username = oName.value.trim()

2.2 判断输入不为空 if(username === '' || content === ''){ alert('输入不能为空')

   return }

2.3 利用模板字符串动态生成回复

2.31 获取li          var oLi = document.createElement('li') ;

2.32 把模板字符串放入          oLi.innerHTML = ` `

2.33 把生成的回复添加至文档中  oText.appendChild(oLi)

2.34 留言成功

2.4 利用函数节流实现10s后再次点击效果

2.41 禁用按钮

2.42 开始计数        var count = 6 页面按钮上的字为

oBtn.innerHTML = count + 's之后可以再次留言'

2.43 设置定时器每秒 count-- 再写一次oBtn.innerHTML

2.44 if判断如果时间走完，则清空定时器，按钮开启oBtn.innerHTML='留言‘

    删除功能：点击删除，能够删除留言（删除功能一定是在留言之后才有的，因此写

在留言的绑定事件里面）

2.5 拿到所有的删除按钮

                        var oDels = document.querySelectorAll('.delete')

2.6 循环绑定事件，当点击删除按钮时，删除父元素（也就是li）

                          for(var i = 0 ; i < oDels.length ;i++){

                oDels[i].onclick = function () {

                          this.parentNode.remove()

                        }

                  }

回复功能：点击回复，能够在留言下回复，并且可以选择取消回复

2.7 拿到所有的回复按钮

                       var oAnswers = document.querySelectorAll('.answer')

2.8 循环绑定事件，当点击回复按钮时

     for(var i = 0 ; i < oAnswers.length ; i++){ oAnswers[i].onclick = function () {}

2.81 显示弹窗

$('.popup').style.display = 'flex';

2.82 确认回复的是第几条留言（不然回复将会全部回复在第一条回复上）

                                  var ans = this.previousElementSibling.previousElementSibling ;

利用标签兄弟元素找到

取消功能

2.83 绑定点击事件，点击取消，则弹窗关闭

                          $('.popup').style.display = 'none';

回复

2.84 绑定回复按钮点击事件

2.85 把回复框的值给huiFuContent

2.86 if判断（huiFuContent ），var oP = 创建p元素，把huiFuContent

放在页面的oP.innerHTML上,在ans下插入子元素ans.appendChild(oP)

                     2.87 回复结束，弹窗消失

                                        $('.popup').style.display = 'none'

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 {
    margin-top:10px ;
    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 {
    margin-top:10px ;
    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>

html

 <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">

       <li>
          
      </li> 


    </ul>
  </div>
  <div class="popup">
    <div class="pop-content">
      <div class="pop-head">回复板</div>
      <textarea class="pop-reply" placeholder="请保持言论文明......"></textarea>
      <button class="pop-btn quXiao">取消</button>
      <button class="pop-btn huiFu">回复</button>
    </div>

  </div>

js代码

    var oName = document.querySelector('.name')
    var oContent = document.querySelector('.content')
    var oBtn = document.querySelector('.btn')
    var oText = document.querySelector('.text')
  
    // var oBtn = $('.btn')
          
    function $(selector) {
        return document.querySelector(selector)
    }

    // 留言
    oBtn.onclick = function() {
       var username = oName.value.trim()
       var content = oContent.value.trim()
      //  // 判断昵称
      //  if(username.length === 0){
      //     alert('昵称不能为空')
      //     return
      //  }

      //  if(username && content){

      //  } else {
      //    alert('输入不能为空')
      //  }

      if(username === '' || content === ''){
        alert('输入不能为空')
        return
      } 
    
       var oLi = document.createElement('li') ;
            oLi.innerHTML = `
              <div class="message-head">
              <span class="photo">${username}</span>
              <p class="time">${formatDate()}</p>
              </div>
              <p class="liuyan">${content}</p>
              <div class="reply">
              </div>
              <button class="delete">Delete</button>
              <button class="answer">Answer</button>
          `
          oText.appendChild(oLi)

          oBtn.disabled = true
            var count = 6
            oBtn.innerHTML = count + 's之后可以再次留言'
            var t =setInterval(function(){
                count--
                oBtn.innerHTML = count + 's之后可以再次留言'
                if(count <= 0){
                    clearTimeout(t)
                    oBtn.disabled = false
                    oBtn.innerHTML = '留言'
                }
            },1000)

            // 删除一定在留言了以后再有的 --- 只能删除一个
            // $('.delete').onclick = function () {

            //     this.parentNode.remove()
            // }

            // 拿到所有的删除按钮，然后循环绑定事件
            var oDels = document.querySelectorAll('.delete')
            for(var i = 0  ; i < oDels.length ;i++){
                oDels[i].onclick = function () {
                  this.parentNode.remove()
                }
            }

            // 回复事件
            var oAnswers = document.querySelectorAll('.answer')
            for(var i = 0 ; i < oAnswers.length ; i++){
              oAnswers[i].onclick = function () {

                  // 显示弹窗
                  $('.popup').style.display = 'flex';

                // 在点击回复的时候就需要确定回复的是第几条留言！！！！
                var ans = this.previousElementSibling.previousElementSibling ;
          
                  //取消
                  $('.quXiao').onclick = function () {
                      //关闭弹窗 
                      $('.popup').style.display = 'none';
                  } 

                  //回复
                  $('.huiFu').onclick = function () {
                    var huiFuContent = $('.pop-reply').value
                    if(huiFuContent){
                      var oP = document.createElement('p')
                      oP.innerHTML = huiFuContent
                      ans.appendChild(oP)
                    }
                    $('.pop-reply').value = ''
                    $('.popup').style.display = 'none' ;
                    
                  }

              }
          }
          $('.name').value = ''
          $('.content').value = ''
    }

     function formatDate(){

            var date = new Date();

            var year = date.getFullYear();

            var month = date.getMonth() + 1;

            var day = date.getDate();

            var week = date.getDay();

            var hour = date.getHours();

            var minute = date.getMinutes();

            var second = date.getSeconds();

            if(hour < 10 && hour >= 0){
                hour = '0'+ hour 
            }

            if(minute < 10 && minute >= 0){
                minute = '0'+ minute 
            }

            if(second < 10 && second >= 0){
                second = '0'+ second 
            }

            var arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];

            return year + '-' + month + '-' + day +' ' + hour + ':' + minute + ':' + 

second + '  '  + arr[week]

        }

留言板效果实现

css代码

html

js代码

悦读