当前位置：首页 > news >正文

WEB 作业即时内容发布前端交互案例

news 2026/7/2 14:18:27

在这里我做的是喜灰为主题的

代码如下

<htmllang="zh-CN"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>灰太郎大王新品发布会</title><style>*{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></head><body><divclass="w"><!-- 顶部标题 --><divclass="top-title">灰太郎大王新品发布会</div><!-- 操作的界面 --><divclass="controls clearfix"><textareaplaceholder="请讲"id="area"maxlength="200"></textarea><divclass="count-btn-box"><spanclass="useCount"id="useCount">0</span><span>/</span><span>200</span><buttonid="send"disabled>发布</button></div></div><divclass="contentList"><ulid="list"></ul></div></div><script>letdataArr=[{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元素constarea=document.getElementById('area');constuseCount=document.getElementById('useCount');constsendBtn=document.getElementById('send');constlist=document.getElementById('list');// 1. 实时字数统计 + 发布按钮状态控制area.addEventListener('input',function(){constcurrentLen=this.value.trim().length;useCount.textContent=currentLen;// 按钮可用条件：字数>0 且 ≤200sendBtn.disabled=currentLen===0||currentLen>200;});// 2. 发布功能sendBtn.addEventListener('click',function(){constcontent=area.value.trim();if(!content)return;// 随机选一个用户constrandomIdx=Math.floor(Math.random()*dataArr.length);constrandomUser=dataArr[randomIdx];// 生成当前时间constnow=newDate();constformatTime=(num)=>num.toString().padStart(2,'0');constyear=now.getFullYear();constmonth=formatTime(now.getMonth()+1);constday=formatTime(now.getDate());consthour=formatTime(now.getHours());constminute=formatTime(now.getMinutes());constsecond=formatTime(now.getSeconds());consttimeStr=`${year}年${month}月${day}日${hour}:${minute}:${second}`;// 创建发布项constli=document.createElement('li');li.innerHTML=`<div class="info"> <img src="${randomUser.imgSrc}" alt="${randomUser.uname}" /> <span class="username">${randomUser.uname}</span> <p class="send-time">发布于${timeStr}</p> </div> <div class="content">${content}</div> <span class="the_del">×</span>`;// 插入到列表顶部list.insertBefore(li,list.firstChild);// 绑定删除事件li.querySelector('.the_del').addEventListener('click',function(){li.remove();});// 清空输入框 + 重置字数 + 禁用按钮area.value='';useCount.textContent='0';sendBtn.disabled=true;});</script></body></html>