在这里我做的是喜灰为主题的代码如下htmllangzh-CNheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/title灰太郎大王新品发布会/titlestyle*{margin:0;padding:0;box-sizing:border-box;}body{background-color:#ffffff00;font-family:Microsoft Yahei,sans-serif;}ul{list-style:none;}.w{width:900px;margin:20px auto;padding:0 10px;}/* 顶部标题 */.top-title{font-size:18px;color:#4171ff;margin-bottom:15px;line-height:1.2;}/* 输入框区域 */.controls{width:100%;}.controls textarea{width:100%;height:120px;resize:none;border:1px solid #5496ff;border-radius:6px;outline:none;padding:10px 15px;font-size:14px;color:#333;margin-bottom:10px;line-height:1.5;}.controls textarea::placeholder{color:#909399;}/* 字数和发布按钮 */.count-btn-box{float:right;display:flex;align-items:center;gap:8px;}.count-btn-box span{font-size:14px;color:#7ba2ef;}.count-btn-box .useCount{color:#6573f6;font-weight:500;}.count-btn-box button{width:88px;height:32px;border:none;outline:none;background-color:#0084ff;color:#fff;font-size:14px;border-radius:4px;cursor:pointer;transition:background-color 0.2s;}.count-btn-box button:hover{background-color:#0078e7;}.count-btn-box button:disabled{background-color:#a0cfff;cursor:not-allowed;}/* 内容列表 */.contentList{margin-top:40px;width:100%;}.contentList li{padding:20px 0;border-bottom:1px dashed #e6e6e6;position:relative;}.contentList li .info{position:relative;min-height:60px;}.contentList li .info img{width:50px;height:50px;border-radius:50%;object-fit:cover;}.contentList li .info .username{position:absolute;top:5px;left:65px;font-size:15px;font-weight:500;color:#333;}.contentList li .info .send-time{position:absolute;top:30px;left:65px;font-size:12px;color:#999;}.contentList li .content{margin-left:65px;margin-top:10px;font-size:14px;color:#666;line-height:1.6;word-break:break-all;}.contentList li .the_del{position:absolute;right:0;top:20px;font-size:18px;color:#999;cursor:pointer;width:20px;height:20px;line-height:20px;text-align:center;}.contentList li .the_del:hover{color:#f56c6c;}/* 清除浮动 */.clearfix::after{content:;display:block;clear:both;}/style/headbodydivclassw!-- 顶部标题 --divclasstop-title灰太郎大王新品发布会/div!-- 操作的界面 --divclasscontrols clearfixtextareaplaceholder请讲idareamaxlength200/textareadivclasscount-btn-boxspanclassuseCountiduseCount0/spanspan//spanspan200/spanbuttonidsenddisabled发布/button/div/divdivclasscontentListulidlist/ul/div/divscriptletdataArr[{uname:暖羊羊,imgSrc:./111/1.jpg},{uname:沸羊羊,imgSrc:./111/2.jpg},{uname:美羊羊,imgSrc:./111/3.jpg},{uname:懒羊羊,imgSrc:./111/4.jpg},{uname:喜羊羊,imgSrc:./111/5.jpg},{uname:慢羊羊,imgSrc:./111/6.jpg},{uname:灰太狼,imgSrc:./111/7.jpg},];// 获取DOM元素constareadocument.getElementById(area);constuseCountdocument.getElementById(useCount);constsendBtndocument.getElementById(send);constlistdocument.getElementById(list);// 1. 实时字数统计 发布按钮状态控制area.addEventListener(input,function(){constcurrentLenthis.value.trim().length;useCount.textContentcurrentLen;// 按钮可用条件字数0 且 ≤200sendBtn.disabledcurrentLen0||currentLen200;});// 2. 发布功能sendBtn.addEventListener(click,function(){constcontentarea.value.trim();if(!content)return;// 随机选一个用户constrandomIdxMath.floor(Math.random()*dataArr.length);constrandomUserdataArr[randomIdx];// 生成当前时间constnownewDate();constformatTime(num)num.toString().padStart(2,0);constyearnow.getFullYear();constmonthformatTime(now.getMonth()1);constdayformatTime(now.getDate());consthourformatTime(now.getHours());constminuteformatTime(now.getMinutes());constsecondformatTime(now.getSeconds());consttimeStr${year}年${month}月${day}日${hour}:${minute}:${second};// 创建发布项constlidocument.createElement(li);li.innerHTMLdiv classinfo img src${randomUser.imgSrc} alt${randomUser.uname} / span classusername${randomUser.uname}/span p classsend-time发布于${timeStr}/p /div div classcontent${content}/div span classthe_del×/span;// 插入到列表顶部list.insertBefore(li,list.firstChild);// 绑定删除事件li.querySelector(.the_del).addEventListener(click,function(){li.remove();});// 清空输入框 重置字数 禁用按钮area.value;useCount.textContent0;sendBtn.disabledtrue;});/script/body/html运行结果