嫩草的低语：生命初生的无限可能
!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale
0 title微博发布/title 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,
; height: 30px; cursor: pointer; color: #fff; font: bold 14px 宋体; transition: all
5s; } .controls div button:hover { background: rgb(0, 225,
; } .controls div button:disabled { background: rgba(0, 225, 255,
0.
; } .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 /head body div classw div classcontrols img src../案例/images/
6/tip.png alt /br/ textarea placeholder说点什么吧... idarea cols30 rows10 maxlength200/textarea div span classuseCount iduseCount0/span span//span span200/span button idsend发布/button /div /div div classcontentList ul idlist li classxiaoli/li /ul /div /div li hidden div classinfo img classuserpic src../案例/images/
6/
jpg / span classusername死数据:百里守约/span p classsend-time死数据:发布于 2020年12月05日 00:07:54/p /div div classcontent死数据:111/div span classthe_delX/span /li script let dataArr [ { uname: 司马懿, imgSrc:../案例/images/
5/
jpg }, { uname: 女娲, imgSrc: ../案例/images/
5/
jpg }, { uname: 百里守约, imgSrc: ../案例/images/
5/
jpg }, { uname: 亚瑟, imgSrc: ../案例/images/
5/
jpg }, { uname: 虞姬, imgSrc: ../案例/images/
5/
jpg }, { uname: 张良, imgSrc: ../案例/images/
5/
jpg }, { uname: 安其拉, imgSrc: ../案例/images/
5/
jpg }, { uname: 李白, imgSrc: ../案例/images/
5/
jpg }, { uname: 阿珂, imgSrc: ../案例/images/
5/
jpg }, { uname: 墨子, imgSrc: ../案例/images/
5/
jpg }, { uname: 鲁班, imgSrc: ../案例/images/
5/
jpg }, { uname: 嬴政, imgSrc: ../案例/images/
5/
jpg }, { uname: 孙膑, imgSrc: ../案例/images/
5/
jpg }, { uname: 周瑜, imgSrc: ../案例/images/
5/
jpg }, { uname: 老夫子, imgSrc: ../案例/images/
5/
jpg }, { uname: 狄仁杰, imgSrc: ../案例/images/
5/
jpg }, { uname: 扁鹊, imgSrc: ../案例/images/
5/
jpg }, { uname: 马可波罗, imgSrc: ../案例/images/
5/
jpg }, { uname: 露娜, imgSrc: ../案例/images/
5/
jpg }, { uname: 孙悟空, imgSrc: ../案例/images/
5/
jpg }, { uname: 黄忠, imgSrc: ../案例/images/
5/
jpg }, { uname: 百里玄策, imgSrc: ../案例/images/
5/
jpg }, ] const useCount document.querySelector(.useCount) const textarea document.querySelector(textarea) const send document.querySelector(#send) const ul document.querySelector(.contentList) const li document.querySelector(.xiaoli) textarea.addEventListener(input,function(){ useCount.innerHTMLtextarea.value.length } ) send.addEventListener(click,function(){ if(textarea.value.trim()){ textarea.value useCount.innerHTML0 return alert(请输入内容) } function getRandom(min,max){ return Math.floor(Math.random()*(max - min
)min; } let random getRandom(0,dataArr.length-
let nli document.createElement(li) nli. innerHTML div class info img classuserpic src${dataArr[random].imgSrc} span classusername${dataArr[random].uname} /span p classstime${new Date().toLocaleString()}/p /div div${textarea.value.trim()}/div span classthe_delX/span ul.appendChild(nli) textarea.value useCount.innerHTML0 let deldocument.querySelector(.the_del) del.addEventListener(click,function(){ ul.removeChild(nli) }) }) textarea.addEventListener(keydown,function(e){ e.preventDefault() if (e.codeEnter){ send.click() } }) /script /body /html
九秀-九秀应用
