JS简易微博发布小案例

效果图：

---

html代码：

      
      

        

        
        
        

          0
          /
          200
          发布
        
      
      
      

        

          
        
      
    

---

css代码：

---

JS代码：

 // 模拟数据，后期我们需要从这个数组中随机获取一个数据对象，做为发布微博的用户信息进行渲染，但是这个不是关键业务，我也可以固定写死
      let dataArr = [
        { uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
        { uname: '女娲', imgSrc: './images/9.5/02.jpg' },
        { uname: '老夫子', imgSrc: './images/9.5/03.jpg' },
        { uname: '百里玄策', imgSrc: './images/9.5/04.jpg' }
      ]





      // 获取元素
      let area = document.querySelector(`#area`)  //文本框
      let useCount= document.querySelector(`#useCount`)  //文字数量
      let bnt = document.querySelector(`#send`) //发布按钮
      let list =document.querySelector(`#list`) //列表结
      let contentList=document.querySelector(`.contentList`)  //微博内容

      // 为文本域添加键盘事件
      area.addEventListener(`keydown`,function(e){
        // 判断e.key用户按下的键盘键的值 =Enter回车键
        if (e.key == `Enter`){
          bnt.click()
        }
      })
        // 为文本框添加input事件
      area.addEventListener(`input`,function(){
        // 去除左右空格trim（）
        useCount.innerHTML=area.value.trim().length
      })
      // 为发布按钮添加点击事件
     bnt.addEventListener(`click`,function(){
      // 随机获取数据对象进行渲染
      let arr=parseInt(Math.random()*dataArr.length)

       let content=area.value
      //  判断 文本框内容的长度=0  提示用户
       if (content.trim().length ==0){
         alert(`请先填写内容再发布`)
         return
       }
       let li = document.createElement(`li`)
      //   给元素拼接
       li.innerHTML=`

                        
                        ${dataArr[arr].uname}
                        
发布于 ${dateFormat()}
                      
                      
${content}
                      X`
          // 把创建好的元素插入到list
       list.insertBefore(li,list.children[0])
          //  内容发布出去里面清空
       area.value=``
          //  内容发布出去长度清0
        useCount.innerHTML=0

    // 删除评论
     let del = document.querySelector(`.the_del`)
     del.addEventListener(`click`,function(){
       del.parentNode.remove()
     })

       //  函数封装时间
    function dateFormat(){
      let data = new Date() 
      let year = data.getFullYear() //年
      let month = data.getMonth()+1//月
      let day = data.getDate() //日
      let h = data.getHours() //时
      h = h<10? `0`+h :h
      let m = data.getMinutes() //分
      m = m<10? `0`+m :m
      let s = data.getSeconds() //秒
      s = s<10? `0`+s :s
      return (`${year}-${month}-${day}  ${h}:${m}:${s}`)
    }
     })