评论发布实现思路

通过获取用户输入的内容value,创造新的元素节点document.createElement,添加的内容innerHTML，添加的位置父元素.insertBefore(添加的元素，添加的位置)添加输入事件input，和键盘事件keyup,添加用户输入内容日期格式化，实现一个基本的评论功能

获取标签

 let dataArr =[  {
        uname: '司马懿',
        imgSrc: './images/9.5/01.jpg'
      }, ]
    let send = document.querySelector('#send')
    let area = document.querySelector('#area')
    let list = document.querySelector('#list')
    let useCount = document.querySelector('#useCount')

实现基本的发布

点击按钮实现基本的发布，根据随机数获取随机的对象，将内容显示在浏览器

 send.addEventListener('click', function () {
      //获取文本内容
      let content = area.value
      let arr = document.createElement('li')
      //取随机对象
      let num = parseInt(Math.random() * dataArr.length)
      arr.innerHTML = `<div class="info">
              <img class="userpic" src="${dataArr[num].imgSrc}"/>
              <span class="username">${dataArr[num].uname}</span>
              <p class="send-time">发布于 ${time()}</p>
            </div>
            <div class="content">${content}</div>
            <span class="the_del">X</span>`
      list.insertBefore(arr, list.children[0])
      //输入完成后把文本框内容制空
      area.value = null
    })

计算文本长度与回车发布

 area.addEventListener('input', function () {
      useCount.innerHTML = area.value.trim().length
    })
    //回车发布
    area.addEventListener('keyup', function (e) {
      if (e.which === 13) {
        send.click()
      }

日期格式化

获取当前时间，进行补零操作，封装到函数中，在发布功能中调用

let time = function () {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      day = day < 10 ? '0' + day : day
      let hours = date.getHours()
      hours = hours < 10 ? '0' + hours : hours
      let minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      let miao = date.getSeconds()
      miao = miao < 10 ? '0' + miao : miao
      return `${year}-${month}-${day} ${hours}:${minute}:${miao}`
    }

效果如下: