企业官网建设流程全解析

广州网站开发多少钱,请人做网站安全,站酷网app,制作网站的分类完成该案例需要用到的知识点有#xff1a; 一、HTML基础 1. 语义化标签使用#xff1a; textarea 多行输入框、 ul/li 列表承载动态内容、 span 行内元素展示字数/操作按钮 2. 表单属性#xff1a; maxlength 限制输入框最大字符数、 placeholder 输入提示 3. 元素…完成该案例需要用到的知识点有一、HTML基础1. 语义化标签使用 textarea 多行输入框、 ul/li 列表承载动态内容、 span 行内元素展示字数/操作按钮2. 表单属性 maxlength 限制输入框最大字符数、 placeholder 输入提示3. 元素标识 id 用于精准获取DOM元素 class 用于样式控制和类名判断二、CSS基础布局1. 通用样式重置 * {margin:0;padding:0;box-sizing:border-box;} 统一盒模型、清除默认边距2. 布局技巧 flex 布局实现头像内容的横向排列、 float 实现字数统计与发布按钮的右对齐 flex-shrink:0 防止头像被挤压3. 样式控制 resize:none 禁止文本域拉伸、 cursor:pointer/not-allowed 鼠标样式交互、 disabled 状态的样式覆写4. 辅助样式 word-break:break-all 实现长文本自动换行、 dashed 虚线边框做列表分隔、 border-radius:50% 实现圆形头像5. 溢出处理 overflow:hidden 清除浮动带来的父元素高度塌陷问题三、JavaScript 核心重点1. DOM 元素操作- 元素获取 document.getElementById() 根据ID获取指定DOM元素核心获取方式- 元素创建 document.createElement() 动态创建节点如li- 内容插入 innerHTML 为元素设置HTML结构支持拼接标签字符串高效创建复杂节点 insertBefore(新节点, 参考节点) 实现新内容前置插入发布的内容显示在最顶部- 元素删除 parentElement.remove() 通过子元素找到父元素并删除整个节点- 内容重置通过修改元素 value 文本域、 textContent 普通元素实现内容清空/更新2. 事件处理- 事件绑定 addEventListener() 为元素绑定事件推荐方式可绑定多个同类型事件- 核心事件类型 input 事件文本域实时输入监听区别于 keyup 兼容粘贴/输入法等场景 click 点击事件发布、删除操作- 事件委托将删除事件绑定在父元素ul 上通过事件对象 e.target 判断触发源是否为删除按钮 .the_del 解决动态生成元素无法绑定事件的问题- 事件对象 e.target 获取事件的实际触发元素通过 classList.contains() 判断元素是否包含指定类名3. 数据处理与交互- 文本处理 trim() 去除字符串首尾空格避免发布空内容/纯空格内容- 状态控制通过修改元素 disabled 属性控制发布按钮的可用/禁用状态无内容时禁用有内容时启用- 随机数应用 Math.floor(Math.random() * 数组长度) 实现从数组中随机选取元素随机获取用户头像和昵称- 日期时间格式化 new Date() 获取当前时间通过 getFullYear()/getMonth()/getDate() 等方法获取时间分量 padStart(2, 0) 实现补零操作如1月→01月9分→09分保证时间格式统一4. 数组与对象基础- 数组取值通过索引获取数组中的对象元素如 userList[索引] - 对象属性访问通过 . 访问对象的属性如 randomUser.uname / randomUser.imgSrc 5. 页面初始化- 初始状态设置页面加载时主动设置发布按钮的 disabled true 避免初始状态按钮可点击的不合理情况6. 字符串拼接- 模板字符串隐式通过 ${变量} 拼接HTML结构和动态数据昵称、头像、时间、发布内容简化字符串拼接操作四、代码的实现!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title微博发布/title style * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } .w { width: 900px; margin: 0 auto; } .controls { overflow: hidden; margin-top: 20px; } .controls p { color: #409eff; margin-bottom: 8px; font-size: 16px; } .controls textarea { width: 100%; height: 120px; resize: none; border: 1px solid #e4e7ed; border-radius: 8px; outline: none; padding: 12px; font-size: 16px; } .controls div { float: right; margin-top: 10px; } .controls div span { color: #666; font-size: 14px; } .controls div .useCount { color: red; } .controls div button { width: 80px; outline: none; border: none; background: #0088ff; height: 32px; cursor: pointer; color: #fff; font-size: 14px; border-radius: 4px; margin-left: 10px; } .controls div button:hover { background: #0066cc; } .controls div button:disabled { background: #a0cfff; cursor: not-allowed; } .contentList { margin-top: 40px; } .contentList li { padding: 16px 0; border-bottom: 1px dashed #e4e7ed; position: relative; display: flex; gap: 12px; } .contentList li .userpic { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; } .contentList li .content-wrap { flex: 1; } .contentList li .username { font-size: 14px; font-weight: 500; color: #303133; margin-bottom: 4px; display: block; } .contentList li .send-time { font-size: 12px; color: #909399; margin-bottom: 8px; display: block; } .contentList li .content { font-size: 14px; color: #606266; line-height: 1.5; word-break: break-all; } .contentList li .the_del { position: absolute; right: 0; top: 16px; font-size: 18px; cursor: pointer; color: #909399; } /style /head body div classw div classcontrols p有什么新鲜事想告诉大家/p textarea placeholder说点什么吧... idarea cols30 rows10 maxlength200/textarea div span classuseCount iduseCount0/span span//span span200/span button idsend发布/button /div /div div classcontentList ul idlist/ul /div /div script // 模拟用户数据 const userList [ { uname: 司马懿, imgSrc: ../image/图1.png }, { uname: 女娲, imgSrc: ../image/图2.png }, { uname: 百里守约, imgSrc: ../image/图3.png }, { uname: 亚瑟, imgSrc:../image/图4.png }, { uname: 虞姬, imgSrc: ../image/图5.png }, { uname: 张良, imgSrc: ../image/图6.png }, { uname: 安其拉, imgSrc: ../image/图7.png }, { uname: 李白, imgSrc: ../image/图8.jpg }, { uname: 阿珂, imgSrc: ../image/图9.jpg }, { uname: 墨子, imgSrc: ../image/图10.jpg }, ]; // DOM元素 const area document.getElementById(area); const useCount document.getElementById(useCount); const sendBtn document.getElementById(send); const list document.getElementById(list); // 1. 实时更新字数统计 area.addEventListener(input, function () { const len this.value.trim().length; useCount.textContent len; // 控制发布按钮状态 sendBtn.disabled len 0; }); // 2. 发布评论 sendBtn.addEventListener(click, function () { const content area.value.trim(); if (!content) return; // 随机选择一个用户作为评论者 const randomUser userList[Math.floor(Math.random() * userList.length)]; // 获取当前时间 const now new Date(); const timeStr ${now.getFullYear()}年${(now.getMonth() 1).toString().padStart(2, 0)}月${now.getDate().toString().padStart(2, 0)}日 ${now.getHours().toString().padStart(2, 0)}:${now.getMinutes().toString().padStart(2, 0)}:${now.getSeconds().toString().padStart(2, 0)}; // 创建评论元素 const li document.createElement(li); li.innerHTML img classuserpic src${randomUser.imgSrc} alt${randomUser.uname} div classcontent-wrap span classusername${randomUser.uname}/span span classsend-time发布于 ${timeStr}/span div classcontent${content}/div /div span classthe_del×/span ; // 添加到列表最前面 list.insertBefore(li, list.firstElementChild); // 清空输入框并重置字数 area.value ; useCount.textContent 0; sendBtn.disabled true; }); // 3. 删除评论 list.addEventListener(click, function (e) { if (e.target.classList.contains(the_del)) { e.target.parentElement.remove(); } }); // 初始化按钮状态 sendBtn.disabled true; /script /body /html五、代码效果呈现代码效果如下图所示