架构如下weibo.css* {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(252, 251, 251);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;}media (max-width: 920px) {.w {width: 95%;padding: 0 15px;}.controls textarea {width: calc(100% - 40px);}}/* 微博项悬停效果 */.contentList li:hover {background-color: #f9f9f9;transform: translateY(-2px);transition: all 0.3s ease;}/* 发布按钮悬停效果增强 */.controls div button:hover {background: rgb(0, 195, 255);transform: scale(1.05);}/* 删除按钮样式增强 */.contentList li .the_del:hover {color: #ff3333;transform: scale(1.2);}/* 微博内容换行 */.contentList li .content {line-height: 1.6;font-size: 16px;margin-top: 10px;}/* 用户信息样式优化 */.contentList li .info span {color: #333;font-weight: bold;}.contentList li .info p {color: #666;}body {background-color: #f5f8fa;font-family: Microsoft YaHei, Arial, sans-serif;line-height: 1.5;}.w {background: white;border-radius: 10px;padding: 25px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);}.contentList li {border: 1px solid #e6ecf0;border-radius: 10px;padding: 18px;margin-bottom: 15px;background: #fafafa;}.contentList img {border-radius: 50%;border: 2px solid #1da1f2;}.contentList li .info span {color: #333;font-size: 16px;font-weight: bold;}.controls div button {border-radius: 18px;font-weight: bold;}.controls textarea {border: 2px solid #ccd6dd;border-radius: 8px;padding: 12px;}.controls textarea:focus {border-color: #1da1f2;outline: none;}weibo.js// 日期格式化函数 - 保留原有function getTime() {var date new Date();var year date.getFullYear();var month date.getMonth() 1;month month 10 ? 0 month : month;var day date.getDate();day day 10 ? 0 day : day;var hours date.getHours();hours hours 10 ? 0 hours : hours;var minutes date.getMinutes();minutes minutes 10 ? 0 minutes : minutes;var seconds date.getSeconds();seconds seconds 10 ? 0 seconds : seconds;var str year - month - day hours : minutes : seconds;return str;}// 1. 获取元素var area document.querySelector(#area);var send document.querySelector(#send);var useCount document.querySelector(.useCount);var ul document.querySelector(ul);// 用户数据数组 - 确保这个存在var 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 },{ uname: 虞姬, imgSrc: ./images/9.5/05.jpg },{ uname: 张良, imgSrc: ./images/9.5/06.jpg },{ uname: 安其拉, imgSrc: ./images/9.5/07.jpg },{ uname: 李白, imgSrc: ./images/9.5/08.jpg },{ uname: 阿珂, imgSrc: ./images/9.5/09.jpg },{ uname: 墨子, imgSrc: ./images/9.5/10.jpg },{ uname: 鲁班, imgSrc: ./images/9.5/11.jpg },{ uname: 嬴政, imgSrc: ./images/9.5/12.jpg },{ uname: 孙膑, imgSrc: ./images/9.5/13.jpg },{ uname: 周瑜, imgSrc: ./images/9.5/14.jpg },{ uname: 老夫子, imgSrc: ./images/9.5/15.jpg },{ uname: 狄仁杰, imgSrc: ./images/9.5/16.jpg },{ uname: 扁鹊, imgSrc: ./images/9.5/17.jpg },{ uname: 马可波罗, imgSrc: ./images/9.5/18.jpg },{ uname: 露娜, imgSrc: ./images/9.5/19.jpg },{ uname: 孙悟空, imgSrc: ./images/9.5/20.jpg },{ uname: 黄忠, imgSrc: ./images/9.5/21.jpg },{ uname: 百里玄策, imgSrc: ./images/9.5/22.jpg }];// 2. 功能1文本域输入的过程中统计内容的个数给spanarea.oninput function () {var count this.value.length;useCount.innerText count;// 添加字数限制提示if (count 200) {useCount.style.color red;send.disabled true;} else {useCount.style.color #666;send.disabled false;}};// 3. 功能2点击发布按钮创建li追加到ul中send.onclick function () {var v area.value.trim();// 3.3 检测内容的长度是否等于0若等于0提示不能为空if (v.length 0) {alert(内容不能为空);return;}// 检查字数是否超过限制if (v.length 200) {alert(内容不能超过200字);return;}// 随机选择一个用户var randomIndex Math.floor(Math.random() * dataArr.length);var randomUser dataArr[randomIndex];// 3.4 创建li插入到ul中最前面var newLi document.createElement(li);ul.insertBefore(newLi, ul.children[0]);// 3.5 创建一个类名为info的div追加到li中var info document.createElement(div);info.className info;newLi.appendChild(info);// 3.5.1 创建一个img元素追加到类名为info的div中var img document.createElement(img);info.appendChild(img);// 3.5.2 设置img的src - 使用随机用户头像img.src randomUser.imgSrc;img.alt randomUser.uname;// 3.5.3 创建一个span元素追加到类名为info的div中var span document.createElement(span);info.appendChild(span);// 3.5.4 设置span的内容 - 使用随机用户名span.innerText randomUser.uname;// 3.5.5 创建一个p元素追加到类名为info的div中var p document.createElement(p);info.appendChild(p);// 3.5.6 把当前时间设置给p元素p.innerText 发布于 getTime();// 3.6 创建一个类名为content的div,追加到li中var content document.createElement(div);content.className content;newLi.appendChild(content);// 3.7 设置类名为content的div的innerText为文本域的内容content.innerText v;// 3.8 添加删除按钮var delBtn document.createElement(span);delBtn.className the_del;delBtn.innerHTML ×;delBtn.title 删除此微博;newLi.appendChild(delBtn);// 3.9 发布成功后清空文本域数量重置为0area.value ;useCount.innerText 0;useCount.style.color #666;// 添加删除功能delBtn.addEventListener(click, function() {if (confirm(确定要删除这条微博吗)) {newLi.style.opacity 0;newLi.style.transform translateX(100px);setTimeout(function() {ul.removeChild(newLi);}, 300);}});};// 4. 添加快捷键支持CtrlEnter 发布area.addEventListener(keydown, function(e) {if (e.ctrlKey e.key Enter) {if (!send.disabled) {send.click();}}});// 5. 初始化为页面加载时显示的微博添加删除功能// 如果你有初始微博可以在这里添加删除功能// 6. 添加一些初始示例微博可选window.onload function() {// 如果有需要可以在这里添加一些示例微博console.log(微博系统已加载完成);};index.html!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefcss/weibo.css/headbodydiv classwdiv classcontrolsimg srcimages/tip.png altbrtextarea placeholder说点什么吧... idarea cols30 rows10 maxlength200/textareadivspan classuseCount0/spanspan//spanspan200/spanbutton idsend发布/button/div/divdiv classcontentListul/ul/div/divscriptlet 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 },{ uname: 虞姬, imgSrc: ./images/9.5/05.jpg },{ uname: 张良, imgSrc: ./images/9.5/06.jpg },{ uname: 安其拉, imgSrc: ./images/9.5/07.jpg },{ uname: 李白, imgSrc: ./images/9.5/08.jpg },{ uname: 阿珂, imgSrc: ./images/9.5/09.jpg },{ uname: 墨子, imgSrc: ./images/9.5/10.jpg },{ uname: 鲁班, imgSrc: ./images/9.5/11.jpg },{ uname: 嬴政, imgSrc: ./images/9.5/12.jpg },{ uname: 孙膑, imgSrc: ./images/9.5/13.jpg },{ uname: 周瑜, imgSrc: ./images/9.5/14.jpg },{ uname: 老夫子, imgSrc: ./images/9.5/15.jpg },{ uname: 狄仁杰, imgSrc: ./images/9.5/16.jpg },{ uname: 扁鹊, imgSrc: ./images/9.5/17.jpg },{ uname: 马可波罗, imgSrc: ./images/9.5/18.jpg },{ uname: 露娜, imgSrc: ./images/9.5/19.jpg },{ uname: 孙悟空, imgSrc: ./images/9.5/20.jpg },{ uname: 黄忠, imgSrc: ./images/9.5/21.jpg },{ uname: 百里玄策, imgSrc: ./images/9.5/22.jpg },]// 1、元素对象的获取let textarea document.querySelector(textarea)let useCount document.querySelector(.useCount)let send document.querySelector(#send)let ul document.querySelector(.contentList ul)textarea.addEventListener(input,function(){// alert(666)useCount.innerHTML textarea.value.length})// 点击按钮发送lisend.addEventListener(click,function(){if (textarea.value.trim()){textarea.valueuseCount.innerHTML0return alert(内容不能为空)}function getRandom(min,max){return Math.floor(Math.random() * (max - min 1)) min}let random getRandom(0,dataArr.length-1)// 创建新的lilet newLI document.createElement(li)// li里面添加内容newLI.innerHTMLdiv classinfoimg classuserpic src${dataArr[random].imgSrc}span classusername ${dataArr[random].uname}/spanp classsend-time${new Date().toLocaleString()}/p/p/divdiv${textarea.value.trim()}/divspan classthe_delX/span// 追加// ul.appendChild(newLI)ul.insertBefore(newLI,ul.children[0])textarea.valueuseCount.innerHTML0// 删除留言let del document.querySelector(.the_del)del.addEventListener(click,function(){ul.removeChild(newLI)})// let dels document.querySelectorAll(.the_del)// console.log(dels)// for(let i of dels){// console.log(i)// i.addEventListener(click,function(){// ul.removeChild(i.parentNode)// })// }})// 快捷键的设置textarea.addEventListener(keydown,function(e){e.preventDefault()if (e.codeEnter){send.click()}})// JS代码的执行机制/script/body/html实现页面