HTML练习
仿写微博发布案例
代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简易动态发布系统</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } /* 容器居中 */ .container { width: 800px; margin: 50px auto; padding: 20px; border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.08); } /* 输入区域样式 */ .input-area textarea { width: 100%; height: 120px; resize: none; border: 1px solid #eee; border-radius: 8px; padding: 15px; font-size: 16px; margin-bottom: 15px; transition: border 0.3s; } .input-area textarea:focus { outline: none; border-color: #4299e1; } /* 发布区域样式 */ .publish-bar { display: flex; justify-content: space-between; align-items: center; } .word-count span { color: #666; font-size: 14px; margin-right: 10px; } .word-count .useCount { color: #e53e3e; font-weight: bold; } .publish-btn { width: 110px; height: 36px; border: none; border-radius: 6px; background: #4299e1; color: #fff; font-size: 16px; cursor: pointer; transition: background 0.3s; } .publish-btn:hover { background: #3182ce; } .publish-btn:disabled { background: #a7c0ff; cursor: not-allowed; } /* 动态列表样式 */ .dynamic-list { margin-top: 30px; } .dynamic-list li { padding: 20px; border-bottom: 1px dashed #eee; position: relative; transition: background 0.3s; } .dynamic-list li:hover { background: #fafafa; } .user-info { display: flex; align-items: center; margin-bottom: 10px; } .user-avatar { width: 70px; height: 70px; border-radius: 50%; margin-right: 15px; } .user-meta span { font-size: 17px; font-weight: 600; color: #333; } .user-meta p { font-size: 12px; color: #999; margin-top: 4px; } .dynamic-content { color: #555; font-size: 15px; line-height: 1.6; word-break: break-all; margin-left: 85px; } /* 删除按钮样式 */ .delete-btn { position: absolute; right: 20px; top: 20px; color: #999; font-size: 20px; cursor: pointer; transition: color 0.3s; } .delete-btn:hover { color: #e53e3e; } </style> </head> <body> <div class="container"> <!-- 输入区域 --> <div class="input-area"> <textarea id="content" placeholder="分享你的想法..."></textarea> <div class="publish-bar"> <div class="word-count"> 已输入：<span class="useCount">0</span> 字 </div> <button class="publish-btn" id="publish">发布动态</button> </div> </div> <!-- 动态列表 --> <ul class="dynamic-list" id="dynamicList"></ul> </div> <script> // 1. 日期格式化函数（优化格式，保持美观） function formatTime() { const date = new Date(); const pad = (num) => num < 10 ? `0${num}` : num; const year = date.getFullYear(); const month = pad(date.getMonth() + 1); const day = pad(date.getDate()); const hours = pad(date.getHours()); const minutes = pad(date.getMinutes()); const seconds = pad(date.getSeconds()); return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; } // 2. 获取页面元素 const textarea = document.getElementById('content'); const publishBtn = document.getElementById('publish'); const wordCountSpan = document.querySelector('.useCount'); const dynamicList = document.getElementById('dynamicList'); // 3. 功能1：实时统计输入字数 textarea.oninput = function() { const length = this.value.trim().length; wordCountSpan.innerText = length; // 输入为空时禁用按钮 publishBtn.disabled = length === 0; }; // 4. 功能2：发布动态 publishBtn.onclick = function() { const content = textarea.value.trim(); // 二次校验（避免绕过input事件直接点击） if (!content) { alert('动态内容不能为空哦！'); return; } // 创建动态列表项li const li = document.createElement('li'); // 创建用户信息区域 const userInfo = document.createElement('div'); userInfo.className = 'user-info'; li.appendChild(userInfo); // 头像 const avatar = document.createElement('img'); avatar.className = 'user-avatar'; // 使用在线占位图（避免本地路径问题） avatar.src = 'https://via.placeholder.com/70/4299e1/ffffff?text=U'; userInfo.appendChild(avatar); // 用户名和发布时间 const userMeta = document.createElement('div'); userMeta.className = 'user-meta'; userInfo.appendChild(userMeta); const username = document.createElement('span'); username.innerText = '星辰大海'; // 自定义用户名 userMeta.appendChild(username); const publishTime = document.createElement('p'); publishTime.innerText = `发布于 ${formatTime()}`; userMeta.appendChild(publishTime); // 动态内容 const dynamicContent = document.createElement('div'); dynamicContent.className = 'dynamic-content'; dynamicContent.innerText = content; li.appendChild(dynamicContent); // 删除按钮（补充原系统未实现的功能） const deleteBtn = document.createElement('div'); deleteBtn.className = 'delete-btn'; deleteBtn.innerText = '×'; deleteBtn.onclick = function() { if (confirm('确定要删除这条动态吗？')) { dynamicList.removeChild(li); } }; li.appendChild(deleteBtn); // 将新动态插入列表顶部 dynamicList.insertBefore(li, dynamicList.firstChild); // 清空输入框并重置字数 textarea.value = ''; wordCountSpan.innerText = '0'; publishBtn.disabled = true; }; // 初始化：默认禁用发布按钮 publishBtn.disabled = true; </script> </body> </html>