-
基于原生 Web 技术构建在线强密码生成器一、概述1.1 案例介绍本案例旨在通过构建一个实用的强密码生成器工具，帮助开发者掌握原生Web技术的核心概念和实践技巧。强密码生成器是一个轻量级的前端应用，可以快速生成安全的随机密码，满足日常网络账户的安全需求。该案例涵盖以下关键技术点：HTML结构设计：构建语义化页面结构CSS样式布局：实现现代化的玻璃拟态（Glassmorphism）视觉效果JavaScript算法实现：随机字符池抽取算法用户交互设计：滑块控制、一键复制等功能SEO优化策略：关键词、描述等元数据配置通过完成此案例，开发者可以全面了解前端开发的基础知识，并能够独立构建类似的实用工具。1.2 适用对象个人开发者前端初学者高校学生1.3 案例流程说明：环境准备：准备本地开发环境（如 VS Code）及浏览器；界面开发：构建 HTML 结构与 CSS 样式（玻璃拟态风格）；逻辑实现：编写 JavaScript 核心算法（随机字符池抽取）；功能优化：添加一键复制及 SEO 元数据配置；运行验收：本地运行测试并验证功能。资源总览本案例为轻量级前端项目，无需云资源消耗。预计花费0元。资源名称规格单价（元）时长（分钟）本地开发环境Windows/Mac/Linux + VScode免费30浏览器Chrome / Edge / Firefox免费10编辑器插件CodeArts代码智能体免费10二、环境和资源准备2.1 准备开发环境本案例基于原生 HTML/CSS/JS 开发，无需复杂的环境配置。代码编辑器：安装 VS Code。浏览器：推荐使用 Chrome 或 Edge 进行调试预览。编辑器插件：CodeArts代码智能体2.2 项目模板本案例将从零开始构建 password-generator.html 及其相关资源文件。三、构建应用3.1 创建项目结构1）项目结构说明：Web 开发工具箱 - 密码生成器模块web-dev-toolkit ├── index.html // 首页入口 ├── tool │ ├── password-generator.html // [新增] 工具主页 │ ├── script │ │ └── password-generator.js // [新增] 核心逻辑 │ └── style │ └── password-generator.css // [新增] 样式文件 └── ...3.2 部署项目代码1）创建 HTML 结构在 tool 目录下新建 password-generator.html，引入必要的资源与元数据。核心代码定义：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>强密码生成器 - 在线安全密码制作</title> <!-- SEO 优化 --> <meta name="keywords" content="密码生成器,随机密码,强密码" /> <meta name="description" content="一键生成高强度随机密码..." /> <link rel="stylesheet" href="style/password-generator.css" /> </head> <body> <div class="container"> <div class="card"> <header><h1>强密码生成器</h1></header> <!-- 密码展示区 --> <div class="password-display-container"> <div class="password-display" id="passwordOutput">点击生成</div> <button class="copy-btn" id="copyBtn">复制</button> </div> <!-- 控制区 --> <div class="controls"> <div class="range-wrapper"> <label>长度: <span id="lengthVal">16</span></label> <input type="range" id="lengthRange" min="4" max="64" value="16" /> </div> <!-- 选项... --> <button class="generate-btn" id="generateBtn">生成新密码</button> </div> </div> </div> <script src="script/password-generator.js"></script> </body> </html> 2）编写 CSS 样式在 tool/style 目录下新建 password-generator.css，实现玻璃拟态视觉效果。核心样式代码：:root { --primary-color: #111827; --card-bg: #ffffff; } .card { background: var(--card-bg); border-radius: 24px; backdrop-filter: blur(20px); /* 关键属性：磨砂效果 */ padding: 3rem 2rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .password-display { font-family: "JetBrains Mono", monospace; /* 等宽字体优化阅读体验 */ word-break: break-all; background: #f9fafb; border: 2px solid #e5e7eb; } 3）实现核心逻辑在 tool/script 目录下新建 password-generator.js，实现随机生成算法。定义字符集与生成函数：const CHAR_SETS = { uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", lowercase: "abcdefghijklmnopqrstuvwxyz", numbers: "0123456789", symbols: "!@#$%^&*()_+~`|}{[]:;?><,./-=", }; function generatePassword() { // 1. 构建动态字符池 let charPool = ""; if (elements.uppercase.checked) charPool += CHAR_SETS.uppercase; if (elements.lowercase.checked) charPool += CHAR_SETS.lowercase; if (elements.numbers.checked) charPool += CHAR_SETS.numbers; if (elements.symbols.checked) charPool += CHAR_SETS.symbols; // 2. 随机抽取 const length = parseInt(elements.lengthRange.value); let password = ""; for (let i = 0; i < length; i++) { // 使用 Math.floor(Math.random()) 保证随机性 const randomIndex = Math.floor(Math.random() * charPool.length); password += charPool[randomIndex]; } elements.output.textContent = password; } 实现一键复制功能：function copyToClipboard() { const password = elements.output.textContent; // 使用现代 Clipboard API navigator.clipboard .writeText(password) .then(() => { showCopyTooltip(); // 交互反馈 }) .catch((err) => { console.error("Copy failed", err); }); } 4）运行调试在浏览器中直接打开 tool/password-generator.html 文件。测试生成：拖动滑块调整长度，勾选不同字符类型，点击“生成新密码”，确认密码符合规则。测试复制：点击密码区域或复制按钮，尝试粘贴到记事本中验证。检查 SEO：查看网页源代码，确认 <meta> 标签内容正确。图示：密码生成器运行效果预览四、释放资源本案例为本地静态项目，不占用云端资源。如需清理：关闭浏览器标签页。删除相关项目文件即可。git地址git地址：cid:link_0 -
-
前言携手共创，致敬不凡！2025年，OpenTiny持续在前端开源领域扎根，每一位开发者都是推动项目共同前行的宝贵力量。从bug修复，到技术探讨；从参与开源活动，到输出技术文章；从使用项目，到参与共建，每一步跨越，都凝聚了开发者的智慧与汗水。致敬所有在OpenTiny社区里默默付出、积极贡献、引领创新的杰出个人，我们正式启动“OpenTiny年度贡献者评选”活动！快为你喜爱的人气贡献者投票吧~人气贡献者评选名单公布：年度贡献者投票评选时间：2025年12月25日-2025年12月31日投票规则：每人每天可回答3次，每次最多可投2票，最终投票结果选取前5名投票入口：cid:link_0关于OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～OpenTiny 官网：https://opentiny.designOpenTiny 代码仓库：https://github.com/opentinyTinyVue 源码：https://github.com/opentiny/tiny-vueTinyEngine 源码：https://github.com/opentiny/tiny-engine欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~
-
前言携手共创，致敬不凡！2025年，OpenTiny持续在前端开源领域扎根，每一位开发者都是推动项目共同前行的宝贵力量。从bug修复，到技术探讨；从参与开源活动，到输出技术文章；从使用项目，到参与共建，每一步跨越，都凝聚了开发者的智慧与汗水。致敬所有在OpenTiny社区里默默付出、积极贡献、引领创新的杰出个人，我们正式启动“OpenTiny年度贡献者评选”活动！欢迎各位开发者踊跃报名~活动详情活动简介：本次活动主要是通过开发者申报+社区评选+开发者投票形式开展，入选开发者后续可获得相应活动礼品。本次活动一共设置 4 类奖项。“技术炼金师”（参与共建）、“布道魔法师”（参与分享）、“社区宝藏玩家”（参与社区讨论） 三个类目奖项通过投票评选获奖选手，本次投票共选出5名获奖选手，按照名次顺利依次给予相应奖励。“技术硬核奖”则由社区自主根据实际共建情况评选 2 位，获得机械键盘/蓝牙音响（2选1）及荣誉证书活动奖品：荣誉奖项礼品第一名技术炼金师布道魔法师社区宝藏玩家机械键盘 / 蓝牙音响（2选1） +荣誉证书第二名华为 66W 快充充电宝+荣誉证书第三名BKT 护腰坐垫椅+荣誉证书第四/五名屏幕挂灯+荣誉证书社区优秀共建者技术硬核奖机械键盘 / 蓝牙音响（2选1） +荣誉证书活动时间：年度贡献者征集时间：2025年12月17日-2025年12月24日年度贡献者投票评选时间：2025年12月25日-2025年12月31日报名入口：https://v.wjx.cn/vm/tdGJdjR.aspx#关于OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～OpenTiny 官网：https://opentiny.designOpenTiny 代码仓库：https://github.com/opentinyTinyVue 源码：https://github.com/opentiny/tiny-vueTinyEngine 源码： https://github.com/opentiny/tiny-engine欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~
-
关于 OpenTiny 欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～OpenTiny 官网：https://opentiny.designOpenTiny 代码仓库：https://github.com/opentinyTinyVue 源码：https://github.com/opentiny/tiny-vueTinyEngine 源码：https://github.com/opentiny/tiny-engine欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~
-
活动介绍：OpenTiny 是华为云开源的企业级前端智能应用解决方案，通过本次产品体验官活动，您可以了解当前OpenTiny项目中的 TinyRobot、Web Agent、NEXT SDK 三个产品，了解其智能化能力，并实现应用的智能化改造，从而让AI智能体代替人操作Web应用，助力用户更高效地完成业务目标。活动时间：2025.9.8-2025.10.14活动流程：1、 访问体验环境：Chrome、VSCode2、 按照实操流程进行体验，可参考实操手册3、 将体验完成截图发送至评论区，同时说明体验感受奖品示例：序号礼包名称介绍1200元开发者礼包1开发者定制双肩包（黑武士款）开发者定制渔夫帽（2025款）开发者定制鼠标垫大号（2025款）2200元开发者礼包2开发者定制冲锋衣（M-3XL）开发者定制渔夫帽（2025款）开发者定制鼠标垫大号（2025款）活动说明：1、完成体验请在本活动评论区，截图体验完成的实际截图，并说明体验感受。2、如果有任何关于OpenTiny NEXT的体验建议，请提交至云声建议平台（填写时，关联产品/功能 选择Codelabs) 并标明以【OpenTiny NEXT体验】为开头，比如【OpenTiny NEXT体验】整体上手体验不错，建议考虑XXX场景，实现接入智能化能力。3、 所有参与活动的开发者需要完成实际体验，有任何问题欢迎联系OpenTiny小助手【请备注：体验官活动】。 4、 活动完成后，根据开发者体验反馈，抽取5位幸运用户，获得价值200元开发者礼包。（本次活动以高价值建议、体验完整性等因素为主要抽选标准）5、 提交体验感受时，可以围绕体验流程、操作步骤、问题建议等方向进行展开，建议内容表述清晰，有操作截图或链接等详细描述。6、 兑换礼品以仓库现有礼品为准，不可以指定，如遇商品缺货，将随机换成其他等价值礼品发放。关于 OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～OpenTiny 官网：https://opentiny.designOpenTiny 代码仓库：cid:link_4TinyVue 源码：cid:link_3TinyEngine 源码： cid:link_1欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~
-
-
-
在前端开发中，div 元素的 style 属性（内联样式）可以使用单引号，但需要遵循 HTML 和 JavaScript 的语法规则。以下是具体说明和示例：1. HTML 中的 style 属性在 HTML 中，属性值默认用双引号包裹，但如果你需要在属性值内使用双引号，可以用单引号包裹整个 style 值，或者对双引号进行转义。示例 1：单引号包裹样式值<div style='color: red; font-size: 16px;'>内容</div> 合法：单引号包裹整个 style 值，内部用分号分隔样式规则。示例 2：双引号包裹样式值（更常见）<div style="color: red; font-size: 16px;">内容</div> 更推荐：HTML 中通常用双引号包裹属性值，样式规则内部用分号分隔。注意事项：如果样式值本身包含单引号，需要转义或改用双引号：<div style="font-family: 'Times New Roman';">内容</div> <!-- 或 --> <div style='font-family: "Times New Roman";'>内容</div> 2. JavaScript 动态设置 style在 JavaScript 中，字符串可以用单引号或双引号，但需注意嵌套引号的转义。示例 1：单引号字符串element.style = 'color: red; font-size: 16px;'; 示例 2：双引号字符串element.style = "color: red; font-size: 16px;"; 示例 3：混合引号（需转义）element.style = "font-family: 'Arial';"; // 合法 element.style = 'font-family: "Arial";'; // 合法 3. CSS-in-JS 或模板字符串（如 React）在 React 或 Vue 等框架中，模板字符串（反引号 `）可以方便地嵌入多行样式：React 示例：<div style={{ color: 'red', fontSize: '16px' }}>内容</div> // 或动态样式： <div style={`color: ${textColor}; font-size: 16px;`}>内容</div> 总结HTML 中：style 属性值可以用单引号或双引号包裹，但需注意嵌套引号的转义。JavaScript 中：字符串引号可自由选择，但需保持一致性。推荐做法：在 HTML 中优先使用双引号包裹属性值，样式规则内部用分号分隔；在 JavaScript 中根据团队规范选择单/双引号。单引号完全合法，但需确保代码风格统一！ -
-
-
TinyVue是一个跨端跨框架的企业级UI组件库，基于renderless无渲染组件设计架构，实现了一套代码同时支持Vue2和Vue3，支持PC和移动端，包含100多个功能丰富的精美组件，可帮助开发者高效开发Web应用。 4月28日晚19点，泽瑞科技前端架构师、鸿蒙开源布道师、阿里友盟KOL将为大家分享如何基于TinyVue组件库定制企业级UI体系，欢迎大家进入直播间一起讨论
-
TinyVue是一个跨端跨框架的企业级UI组件库，基于renderless无渲染组件设计架构，实现了一套代码同时支持Vue2和Vue3，支持PC和移动端，包含100多个功能丰富的精美组件，可帮助开发者高效开发Web应用。4月22日19点，云计算高级前端开发工程师，TinyVue 项目成员郑志超、申君健老师，将为大家分享 TinyVue 多端模板与模式切换，并与大家介绍 TinyVue 轻量图标库的使用。本次直播将围绕 TinyVue 的最新版本展开。首先，为大家介绍 TinyVue 多端模板架构，接着为大家讲解 Mobile-First 多端模板用法，并通过实际案例向大家演示 UI 效果对比，当然还有图标库分享等着大家。同时，直播过程中还会设置技术答疑环节，欢迎大家积极提问，我们将现场为大家答疑解惑。无论你是技术大牛，还是初学者，相信这场直播都会让你收获满满！直播详情直播时间：2025年4月22日19点直播地址：http://live.bilibili.com/31174756直播讲师：云计算高级前端开发工程师 郑志超、云计算高级前端开发工程师 申君健直播议题：TinyVue多端能力及深色模式介绍TinyVue轻量图标库分享关于OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～OpenTiny 官网：https://opentiny.designOpenTiny 代码仓库：https://github.com/opentinyTinyVue 源码：https://github.com/opentiny/tiny-vueTinyEngine 源码： https://github.com/opentiny/tiny-engine欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~
-
TinyEngine 低代码引擎使能开发者定制低代码平台。它是低代码平台的底座，提供可视化搭建页面等基础能力，既可以通过线上搭配组合，也可以通过创建cli工程进行二次开发，实时定制出自己的低代码平台。适用于多场景的低代码平台开发，如：资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。社区贡献者观默评价它：“基于 Vue3，利用 DSL 实现从 schema 生成源码，支持多框架集成，且拥有强大的插件系统，能实现各种定制化开发的需求”。如果你正在寻找一款趁手的低代码引擎或者你对低代码开发感兴趣，那你不妨来试试 TinyEngine。本期直播将通过实战分享，手把手带你完成项目搭建、组件库部署与注册并开发一款简单的插件。直播详情：
-
给Web开发者的HarmonyOS指南02-布局样式本系列教程适合鸿蒙 HarmonyOS 初学者，为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。本系列教程会将 HTML/CSS 代码片段替换为等价的 HarmonyOS/ArkUI 代码。开发环境准备DevEco Studio 5.0.3HarmonyOS Next API 15布局基础对比在Web开发中，我们使用CSS来控制元素的布局和样式。而在HarmonyOS的ArkUI中，我们使用声明式UI和链式API来实现相同的效果。本文将对比两种框架在布局方面的异同。盒子模型在Web开发中，CSS盒子模型包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。在ArkUI中，这些概念依然存在，只是写法有所不同，容易上手。HTML/CSS代码：<div class="box"> 盒子模型 </div> <style> .box { box-sizing: border-box; /* 内容 */ width: 150px; height: 100px; /* 内边距 */ padding: 10px; /* 边框 */ border: 10px solid pink; /* 底部外边距 */ margin-bottom: 10px; } </style> ArkUI代码：Text('盒子模型') .width(150) .height(100) .padding(10) .border({ width: 10, style: BorderStyle.Solid, color: Color.Pink }) .margin({ bottom: 10 }) 背景色和文字颜色在Web开发中，我们使用 background-color 和 color 属性来设置背景色和文字颜色。在ArkUI中，我们使用 backgroundColor 和 fontColor 方法。HTML/CSS代码：<div class="box"> 背景色、文字色 </div> <style> .box { /* 背景色 */ background-color: #36d; /* 文字色 */ color: #fff; } </style> ArkUI代码：Text('背景色、文字色') .backgroundColor('#36d') .fontColor('#fff') 内容居中在Web开发中，我们使用 display: flex 配合 justify-content 和 align-items 实现内容居中。在ArkUI中，我们可以使用 Column 或 Row 组件配合 justifyContent 和 alignItems 属性。HTML/CSS代码：<div class="box"> 内容居中 </div> <style> .box { display: flex; justify-content: center; align-items: center; } </style> ArkUI代码：Column() { Text('内容居中') } .backgroundColor('#36D') .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .width(150) .height(100) .padding(10) 圆角在Web开发中，我们使用border-radius属性来设置圆角。在ArkUI中，我们使用borderRadius方法。HTML/CSS代码：<div class="box"> 圆角 </div> <style> .box { border-radius: 10px; } </style> ArkUI代码：Text('圆角') .width(150) .height(100) .backgroundColor('#36D') .borderRadius(10) 阴影效果在Web开发中，我们使用box-shadow属性来设置阴影效果。在ArkUI中，我们使用shadow方法。HTML/CSS代码：<div class="box"> 阴影 </div> <style> .box { box-shadow: 0 6px 50px rgba(0, 0, 0, 0.5); } </style> ArkUI代码：Text('阴影') .width(150) .height(100) .backgroundColor('#F5F5F5') .shadow({ offsetX: 0, offsetY: 6, radius: 50, color: 'rgba(0, 0, 0, 0.5)', }) 布局容器和轴向基本容器在Web开发中，我们使用<div>作为通用容器。在ArkUI中，我们主要使用Column和Row组件，注意 alignItems 需区分轴向。HTML/CSS代码：<div class="column"> <!-- 垂直方向布局 --> </div> <div class="row"> <!-- 水平方向布局 --> </div> <style> .column { display: flex; flex-direction: column; align-items: center; } .row { display: flex; flex-direction: row; align-items: center; } </style> ArkUI代码：Column() { // 垂直方向布局，交叉轴水平居中 } .alignItems(HorizontalAlign.Center) Row() { // 水平方向布局，交叉轴垂直居中 } .alignItems(VerticalAlign.Center) 关键区别总结样式应用方式：HTML/CSS：使用选择器和属性声明样式ArkUI：使用链式API直接在组件上设置样式布局容器：HTML：使用 <div> 等标签，配合CSS实现布局ArkUI：使用专门的布局组件如 Column、Row 等组件，配合样式属性布局单位使用：HTML/CSS：使用 px、em、rem、百分比等单位ArkUI：使用 px、vp、lpx 、百分比等单位，使用数字单位 vp 可省略样式继承：HTML/CSS：通过CSS选择器实现样式继承ArkUI：没有样式继承学习建议理解链式API：熟悉ArkUI的链式API调用方式掌握常用样式方法的命名规则布局思维转变：从CSS盒模型思维转向组件化思维理解ArkUI的布局容器特性样式设置习惯：养成使用链式API设置样式的习惯注意样式方法的参数格式组件嵌套：合理使用组件嵌套实现复杂布局注意组件的父子关系总结作为Web开发者，迁移到 HarmonyOS 开发需要适应新的布局和样式设置方式。概念其实非常相似，通过理解这些差异，并掌握ArkUI的组件化开发方式，Web开发者可以快速上手HarmonyOS开发。希望这篇 HarmonyOS 教程对你有所帮助，期待您的 👍点赞、💬评论、🌟收藏 支持。
推荐直播
-
HDC深度解读系列 - Serverless与MCP融合创新，构建AI应用全新智能中枢2025/08/20 周三 16:30-18:00
张昆鹏 HCDG北京核心组代表
HDC2025期间，华为云展示了Serverless与MCP融合创新的解决方案，本期访谈直播，由华为云开发者专家(HCDE)兼华为云开发者社区组织HCDG北京核心组代表张鹏先生主持，华为云PaaS服务产品部 Serverless总监Ewen为大家深度解读华为云Serverless与MCP如何融合构建AI应用全新智能中枢
回顾中 -
关于RISC-V生态发展的思考2025/09/02 周二 17:00-18:00
中国科学院计算技术研究所副所长包云岗教授
中科院包云岗老师将在本次直播中，探讨处理器生态的关键要素及其联系，分享过去几年推动RISC-V生态建设实践过程中的经验与教训。
回顾中 -
一键搞定华为云万级资源，3步轻松管理企业成本2025/09/09 周二 15:00-16:00
阿言 华为云交易产品经理
本直播重点介绍如何一键续费万级资源，3步轻松管理成本，帮助提升日常管理效率！
回顾中
热门标签