写一个简单的聊天大厅

交流大厅!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title交流大厅/title !-- 引入 TailwindCSS -- script srchttps://cdn.tailwindcss.com/script !-- 引入 Font Awesome -- link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css style body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; background-color: #f3f4f6; } .glass-effect { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } .post-card { transition: all 0.3s ease; } .post-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* 自定义滚动条 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .fade-in { animation: fadeIn 0.5s ease-in-out; } keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /style /head body classmin-h-screen flex flex-col !-- 头部导航 -- header classbg-white shadow-sm sticky top-0 z-50 div classmax-w-4xl mx-auto px-4 py-4 flex justify-between items-center div classflex items-center space-x-3 img srcimg/picture1.png stylewidth: 350px; / /div div classtext-sm text-gray-500 span idpost-count0/span 条动态 /div /div /header !-- 主内容区域 -- main classflex-grow max-w-4xl mx-auto w-full px-4 py-6 space-y-6 !-- 发布框区域 -- section classglass-effect rounded-2xl shadow-lg p-6 div classflex space-x-4 !-- 用户头像 -- div classflex-shrink-0 img srchttps://picsum.photos/100/100?randomuser alt当前用户头像 classw-12 h-12 rounded-full object-cover border-2 border-blue-100 /div div classflex-grow space-y-3 !-- 文本输入区 -- textarea idpost-input classw-full p-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none text-gray-700 placeholder-gray-400 transition-all placeholder说点什么... rows4 maxlength200/textarea !-- 底部工具栏 -- div classflex justify-between items-center pt-2 div classtext-xs text-gray-400 font-medium span idchar-count0/span / 200 /div div classflex space-x-3 button idclear-btn classpx-4 py-2 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors hidden 清空 /button button idpublish-btn classpx-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all transform active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2 i classfa-solid fa-paper-plane/i span发布/span /button /div /div /div /div /section !-- 动态列表区域 -- section idcontent-list classspace-y-4 !-- 动态内容将通过 JS 渲染在这里 -- div idempty-state classtext-center py-12 hidden div classinline-block p-4 rounded-full bg-gray-100 mb-4 i classfa-regular fa-comment-dots text-4xl text-gray-400/i /div p classtext-gray-500 text-lg暂无动态快来发表第一条吧/p /div /section /main !-- 页脚 -- footer classbg-white border-t border-gray-200 mt-auto div classmax-w-4xl mx-auto px-4 py-6 text-center text-gray-500 text-sm pcopy; 2026 交流大厅. All rights reserved./p /div /footer !-- JavaScript 逻辑 -- script // DOM 元素引用 const postInput document.getElementById(post-input); const charCount document.getElementById(char-count); const publishBtn document.getElementById(publish-btn); const clearBtn document.getElementById(clear-btn); const contentList document.getElementById(content-list); const emptyState document.getElementById(empty-state); const postCountLabel document.getElementById(post-count); // 状态管理 let posts JSON.parse(localStorage.getItem(pengyouquan)) || []; // 初始化 function init() { renderPosts(); updateUIState(); // 事件监听 postInput.addEventListener(input, handleInput); publishBtn.addEventListener(click, handlePublish); clearBtn.addEventListener(click, handleClear); } // 处理输入事件 function handleInput(e) { const len e.target.value.length; charCount.textContent len; // 显示/隐藏清空按钮 if (len 0) { clearBtn.classList.remove(hidden); publishBtn.disabled false; } else { clearBtn.classList.add(hidden); publishBtn.disabled true; } // 字数限制提示颜色变化 if (len 180) { charCount.classList.add(text-red-500); } else { charCount.classList.remove(text-red-500); } } // 处理发布 function handlePublish() { const text postInput.value.trim(); if (!text) return; const newPost { id: Date.now(), // 使用时间戳作为唯一ID uname: 匿名用户, // 模拟用户名 imgSrc: https://picsum.photos/100/100?random${Date.now()}, // 随机头像 text: escapeHtml(text), time: formatTime(new Date()) }; // 添加到数组开头 posts.unshift(newPost); // 保存到本地存储 saveToLocalStorage(); // 重新渲染 renderPosts(); // 重置输入框 postInput.value ; handleInput({ target: { value: } }); // 触发输入事件以更新UI状态 // 滚动到顶部查看新帖子 window.scrollTo({ top: 0, behavior: smooth }); } // 处理清空 function handleClear() { postInput.value ; handleInput({ target: { value: } }); postInput.focus(); } // 渲染帖子列表 function renderPosts() { // 更新计数 postCountLabel.textContent posts.length; // 处理空状态 if (posts.length 0) { contentList.innerHTML ; contentList.appendChild(emptyState); emptyState.classList.remove(hidden); return; } else { emptyState.classList.add(hidden); } // 生成 HTML const html posts.map((post, index) article classpost-card glass-effect rounded-xl p-5 relative fade-in data-id${post.id} div classflex justify-between items-start mb-3 div classflex items-center space-x-3 img src${post.imgSrc} alt用户头像 classw-10 h-10 rounded-full object-cover border border-gray-200 div h3 classfont-bold text-gray-800 text-sm${escapeHtml(post.uname)}/h3 p classtext-xs text-gray-400${post.time}/p /div /div button onclickdeletePost(${post.id}) classtext-gray-400 hover:text-red-500 transition-colors p-2 rounded-full hover:bg-red-50 title删除 i classfa-solid fa-trash-can/i /button /div div classtext-gray-700 leading-relaxed whitespace-pre-wrap break-words text-sm md:text-base ${post.text} /div div classmt-4 flex items-center space-x-4 text-gray-400 text-xs button classhover:text-blue-500 transition-colors flex items-center space-x-1 i classfa-regular fa-heart/i span点赞/span /button button classhover:text-blue-500 transition-colors flex items-center space-x-1 i classfa-regular fa-comment/i span评论/span /button /div /article ).join(); contentList.innerHTML html; } // 删除帖子 window.deletePost function(id) { if(confirm(确定要删除这条动态吗)) { posts posts.filter(post post.id ! id); saveToLocalStorage(); renderPosts(); } }; // 保存到本地存储 function saveToLocalStorage() { try { localStorage.setItem(pengyouquan, JSON.stringify(posts)); } catch (e) { console.error(Local storage error:, e); alert(存储空间不足无法保存); } } // 更新UI状态 function updateUIState() { publishBtn.disabled true; clearBtn.classList.add(hidden); } // 格式化时间 function formatTime(date) { const year date.getFullYear(); const month String(date.getMonth() 1).padStart(2, 0); const day String(date.getDate()).padStart(2, 0); const hours String(date.getHours()).padStart(2, 0); const minutes String(date.getMinutes()).padStart(2, 0); return ${year}-${month}-${day} ${hours}:${minutes}; } // HTML 转义防止 XSS function escapeHtml(text) { const map { : amp;, : lt;, : gt;, : quot;, : #039; }; return text.replace(/[]/g, function(m) { return map[m]; }); } // 启动应用 init(); /script /body /html