<div class="w">
? ? ? <!-- 操作的界面 -->
? ? ? <div class="controls">
? ? ? ? <img src="./images/9.6/tip.png" alt="" /><br />
? ? ? ? <!-- maxlength 可以用來限制表單輸入的內容長度 -->
? ? ? ? <textarea
? ? ? ? ? placeholder="說點什么吧..."
? ? ? ? ? id="area"
? ? ? ? ? cols="30"
? ? ? ? ? rows="10"
? ? ? ? ? maxlength="200"
? ? ? ? ></textarea>
? ? ? ? <div>
? ? ? ? ? <span class="useCount" id="useCount">0</span>
? ? ? ? ? <span>/</span>
? ? ? ? ? <span>200</span>
? ? ? ? ? <button id="send">發(fā)布</button>
? ? ? ? </div>
? ? ? </div>
? ? ? <!-- 微博內容列表 -->
? ? ? <div class="contentList">
? ? ? ? <ul id="list">
? ? ? ? ? <!-- <li>
? ? ? ? ? ? <div class="info">
? ? ? ? ? ? ? <img class="userpic" src="./images/9.5/01.jpg" />
? ? ? ? ? ? ? <span class="username">名字</span>
? ? ? ? ? ? ? <p class="send-time">發(fā)布于 時間</p>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="content">內容</div>
? ? ? ? ? ? <span class="the_del">X</span>
? ? ? ? ? </li> -->
? ? ? ? </ul>
? ? ? </div>
? ? </div>

<style>
? ? ? * {
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? ? }
?
? ? ? ul {
? ? ? ? list-style: none;
? ? ? }
?
? ? ? .w {
? ? ? ? width: 900px;
? ? ? ? margin: 0 auto;
? ? ? }
?
? ? ? .controls textarea {
? ? ? ? width: 878px;
? ? ? ? height: 100px;
? ? ? ? resize: none;
? ? ? ? border-radius: 10px;
? ? ? ? outline: none;
? ? ? ? padding-left: 20px;
? ? ? ? padding-top: 10px;
? ? ? ? font-size: 18px;
? ? ? }
?
? ? ? .controls {
? ? ? ? overflow: hidden;
? ? ? }
?
? ? ? .controls div {
? ? ? ? float: right;
? ? ? }
?
? ? ? .controls div span {
? ? ? ? color: #666;
? ? ? }
?
? ? ? .controls div .useCount {
? ? ? ? color: red;
? ? ? }
?
? ? ? .controls div button {
? ? ? ? width: 100px;
? ? ? ? outline: none;
? ? ? ? border: none;
? ? ? ? background: rgb(0, 132, 255);
? ? ? ? height: 30px;
? ? ? ? cursor: pointer;
? ? ? ? color: #fff;
? ? ? ? font: bold 14px '宋體';
? ? ? ? transition: all 0.5s;
? ? ? }
?
? ? ? .controls div button:hover {
? ? ? ? background: rgb(0, 225, 255);
? ? ? }
?
? ? ? .controls div button:disabled {
? ? ? ? background: rgba(0, 225, 255, 0.5);
? ? ? }
?
? ? ? .contentList {
? ? ? ? margin-top: 50px;
? ? ? }
?
? ? ? .contentList li {
? ? ? ? padding: 20px 0;
? ? ? ? border-bottom: 1px dashed #ccc;
? ? ? ? position: relative;
? ? ? }
?
? ? ? .contentList li .info {
? ? ? ? position: relative;
? ? ? }
?
? ? ? .contentList li .info span {
? ? ? ? position: absolute;
? ? ? ? top: 15px;
? ? ? ? left: 100px;
? ? ? ? font: bold 16px '宋體';
? ? ? }
?
? ? ? .contentList li .info p {
? ? ? ? position: absolute;
? ? ? ? top: 40px;
? ? ? ? left: 100px;
? ? ? ? color: #aaa;
? ? ? ? font-size: 12px;
? ? ? }
?
? ? ? .contentList img {
? ? ? ? width: 80px;
? ? ? ? border-radius: 50%;
? ? ? }
?
? ? ? .contentList li .content {
? ? ? ? padding-left: 100px;
? ? ? ? color: #666;
? ? ? ? word-break: break-all;
? ? ? }
?
? ? ? .contentList li .the_del {
? ? ? ? position: absolute;
? ? ? ? right: 0;
? ? ? ? top: 0;
? ? ? ? font-size: 28px;
? ? ? ? cursor: pointer;
? ? ? }
? ? </style>

?// 模擬數據，后期我們需要從這個數組中隨機獲取一個數據對象，做為發(fā)布微博的用戶信息進行渲染，但是這個不是關鍵業(yè)務，我也可以固定寫死
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`) //發(fā)布按鈕
? ? ? 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
? ? ? })
? ? ? // 為發(fā)布按鈕添加點擊事件
? ? ?bnt.addEventListener(`click`,function(){
? ? ? // 隨機獲取數據對象進行渲染
? ? ? let arr=parseInt(Math.random()*dataArr.length)
?
? ? ? ?let content=area.value
? ? ? // ?判斷 文本框內容的長度=0 ?提示用戶
? ? ? ?if (content.trim().length ==0){
? ? ? ? ?alert(`請先填寫內容再發(fā)布`)
? ? ? ? ?return
? ? ? ?}
? ? ? ?let li = document.createElement(`li`)
? ? ? // ? 給元素拼接
? ? ? ?li.innerHTML=`<div class="info">
? ? ? ? ? ? ? ? ? ? ? ? <img class="userpic" src="${dataArr[arr].imgSrc}" />
? ? ? ? ? ? ? ? ? ? ? ? <span class="username">${dataArr[arr].uname}</span>
? ? ? ? ? ? ? ? ? ? ? ? <p class="send-time">發(fā)布于 ${dateFormat()}</p>
? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? <div class="content">${content}</div>
? ? ? ? ? ? ? ? ? ? ? <span class="the_del">X</span>`
? ? ? ? ? // 把創(chuàng)建好的元素插入到list
? ? ? ?list.insertBefore(li,list.children[0])
? ? ? ? ? // ?內容發(fā)布出去里面清空
? ? ? ?area.value=``
? ? ? ? ? // ?內容發(fā)布出去長度清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}`)
? ? }
})