JS实现微博发布功能_javascript技巧_

             
         
                          
           0           /           200           发布         
       
             
         
                   
       
     

 // 模拟数据，后期我们需要从这个数组中随机获取一个数据对象，做为发布微博的用户信息进行渲染，但是这个不是关键业务，我也可以固定写死 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}`)     } })