一、先说痛点想临时生成个密码你大概会搜一个「在线密码生成器」把需求交给它。但想一想你刚生成的口令明文是不是已经落在了对方的服务器日志里更别提那些页面先弹三个广告再偷偷引一段第三方脚本最后还顺手埋个埋点。工具越来越多但它们离你的机器、离你的数据越来越远。能不能反过来——自己写一个数据不出本机断网也能跑这一篇就带你从零做一个一个离线密码 / 口令生成器支持长度、字符规则、强度提示纯前端、零依赖最后整个东西就是一个.html文件双击即用。二、目标一个能塞进 U 盘的工具我们要交付的东西很具体选长度6–40 位、选字符集大写 / 小写 / 数字 / 符号点一下生成实时显示「熵强度」一键复制并记住你上次的长度偏好不引任何 CDN、框架、字体不联网、不上传存成一个.html就能发给同事。读完你手里就有一个能用的工具而它的全部代码大约 60 行。三、单文件工具长什么样「单文件」不是噱头而是把三件事装进一个文件结构HTML 样式CSS 逻辑JS。最小骨架长这样!doctype html html langzh-CN head meta charsetutf-8 style /* 样式写这里不引外部 css */ /style /head body !-- 结构写这里 -- script /* 逻辑写这里不引外部 js */ /script /body /html三个要点① 用系统字体栈system-ui, Microsoft YaHei, sans-serif不下载字体② 所有计算在浏览器本地完成没有fetch到任何后端③ 状态用localStorage留在本地。这就是「单文件 · 零依赖 · 本地优先」三条铁律的来历。四、实战60 行写出密码生成器下面给出完整可复制的单文件。把它整段保存成password.html双击就能用。!doctype html html langzh-CN head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title离线密码生成器/title style :root { --bg:#0A0A0B; --card:#141417; --line:rgba(255,255,255,.08); --accent:#5E6AD2; --muted:#A1A1AA; } * { box-sizing:border-box; } body { margin:0; font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Microsoft YaHei,sans-serif; background:var(--bg); color:#fff; display:flex; justify-content:center; padding:32px 16px; } .app { width:100%; max-width:420px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; } h1 { font-size:18px; margin:0 0 16px; } .out { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:16px; word-break:break-all; background:#0A0A0B; border:1px solid var(--line); border-radius:8px; padding:12px; min-height:48px; } button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:10px 14px; cursor:pointer; font-size:14px; } button.ghost { background:transparent; border:1px solid var(--line); color:var(--muted); } input[typerange]{ flex:1; } label.chk { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--muted); } .meta { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; margin-top:6px; } .bar { height:6px; border-radius:3px; background:#222; overflow:hidden; margin-top:8px; } .bar i { display:block; height:100%; width:0; background:var(--accent); transition:width .2s; } /style /head body div classapp h1 离线密码生成器/h1 div classout idout aria-livepolite点击生成/div div classbari idbar/i/div div classmetaspan idbits强度—/spanspan idlenLabel16 位/span/div div classrow styledisplay:flex;align-items:center;gap:10px;margin:10px 0 span长度/span input typerange idlen min6 max40 value16 /div div classrow styledisplay:flex;flex-wrap:wrap;gap:10px;margin:10px 0 label classchkinput typecheckbox idup checked 大写/label label classchkinput typecheckbox idlo checked 小写/label label classchkinput typecheckbox iddg checked 数字/label label classchkinput typecheckbox idsy checked 符号/label /div div classrow styledisplay:flex;gap:10px;margin:10px 0 button idgen生成/button button idcopy classghost复制/button /div /div script const $ id document.getElementById(id); const SETS { up: ABCDEFGHJKLMNPQRSTUVWXYZ, lo: abcdefghijkmnopqrstuvwxyz, dg: 23456789, sy: !#$%^()-_[]{} }; // 用密码学安全随机数而不是 Math.random() function randInt(n){ const a new Uint32Array(1); crypto.getRandomValues(a); return a[0] % n; } function gen(){ const len $(len).value; let pool ; for (const k in SETS) if ($(k).checked) pool SETS[k]; if (!pool) { $(out).textContent 至少选一种字符; return; } let s ; for (let i0;ilen;i) s pool[randInt(pool.length)]; $(out).textContent s; const bits Math.round(len * Math.log2(pool.length)); // 熵估算 $(bits).textContent 强度 bits bits; $(bar).style.width Math.min(100, bits/64100) %; try { localStorage.setItem(pw.len, len); } catch(e){} } // 复制优先用剪贴板 APIfile:// 下回退到 execCommand function copy(){ const t $(out).textContent; if (navigator.clipboard window.isSecureContext) navigator.clipboard.writeText(t); else { const tadocument.createElement(textarea); ta.valuet; document.body.appendChild(ta); ta.select(); try{document.execCommand(copy);}catch(e){} document.body.removeChild(ta); } } $(len).oninput () $(lenLabel).textContent $(len).value 位; $(gen).onclick gen; $(copy).onclick copy; const saved localStorage.getItem(pw.len); if (saved) $(len).value saved; gen(); /script /body /html这段代码里有三个值得记住的点1随机性要用crypto.getRandomValues别用Math.random()。后者只是伪随机、可被预测拿来做口令等于没加密。crypto走的是浏览器的密码学安全随机源离线也能用。2强度按「熵」估算而不是按「看起来乱不乱」。一行公式bits 长度 × log2(字符池大小)。16 位、含四类字符大约 90 bits远超够用线64 bits 我设成进度条满格。这比「感觉挺复杂」科学得多。3偏好用localStorage留本地。你下次打开还是上次的长度——但它只存在你这台机器上不会回传任何服务器。五、让它真正「工具化」离线优先三铁律把上面的思路抽出来就是做单文件工具的三条纪律单文件整个工具一个.html可下载、可邮件、可丢 U 盘零依赖不引任何外部 CDN / 框架 / 字体断网照跑本地优先数据不出本机没有后端、没有埋点、没有账号。再加两个小习惯会更「专业」用prefers-reduced-motion尊重系统的减弱动效设置把视觉统一成一套克制的中性暗色比如上面用的#0A0A0B画布 #5E6AD2靛蓝强调色。六、收尾到这里你已经从零写出一个能用的单文件工具了——它不依赖任何库断网可用口令明文只活在你自己的浏览器里。如果你不想自己写、想直接白嫖nano-tools 矩阵里这个密码生成器的完整版叫PassForge连同另外 42 款同类单文件工具白板、JSON、哈希、正则、色彩、无障碍……都开源在 GitHub挑一个双击html就能用。留个思考题如果把这个骨架换成「UUID 生成器」「Base64 编解码」或者「JSON 格式化」改动其实不过十几行——你最想把它改造成什么
企业数字化 ERP 产品动态
相关推荐
ESP32 MicroPython开发环境搭建：VSCode高效配置与调试实战 1. 项目概述：为什么是ESP32MicroPythonVSCode？如果你玩过ESP32，大概率是从Arduino开始的。上手快、库多、社区成熟，这确实是入门的好选择。但当你开始做一些稍微复杂的项目，比如需要处理JSON数据、连接多个传感器、或者… · 2026/11/1 8:09:36
基于深度学习的草莓腐烂智能检测系统设计与实现 1. 项目背景与核心价值草莓作为高经济价值的水果，其保鲜期短、易受微生物侵染的特性导致产后损耗率居高不下。传统人工分拣方式存在效率低（每小时仅能处理200-300颗）、误判率高（约15%-20%）的问题，而基于深度… · 2026/11/1 12:00:48
C++迭代器实现指南：从概念到实战，打造STL兼容容器 1. 项目概述：为什么我们需要迭代器？在C的世界里，尤其是当你开始接触标准模板库（STL）时，“迭代器”这个词会高频出现。很多初学者，包括当年的我，都会有一个疑问：数组我可以… · 2026/11/2 5:21:30
新街高压电工作业通过率揭秘：学历不高也能顺利拿证 新街高压电工作业通过率揭秘：学历不高也能顺利拿证 你是不是也担心自己学历不高， 新街高压电工作业 报不了名？其实不然，只要方法对了，不管你是初中、高中还是职高毕业，都能顺利通过考试拿到证。今天我就用一个真实的案例，给你讲讲… · 2026/11/13 19:16:28
高级电工证必考千万别踩坑 选错机构真白交钱 高级电工证必考千万别踩坑 选错机构真白交钱 怕考不过白交培训费？你不是一个人。身边很多人都因为选错了培训机构，花了几千块报名，结果考试一塌糊涂，钱打水漂。 高级电工证必考… · 2026/11/13 19:16:28
银川中级电工证培训上岗必备，外地证怎么转过来？ 银川中级电工证培训上岗必备，外地证怎么转过来？ 之前考的证在外省能不能转过来？这几乎是所有想在银川上岗的电工都会问的问题。尤其是从外地过来工作的人，手里可能拿着别的省份的中级电工证，但到了银川，证书却不被认可，或者需要重新培训和考试。银川中… · 2026/11/13 19:16:28
维修电工与电工作业网上查询报名不被坑的实战经验 维修电工与电工作业网上查询报名不被坑的实战经验 你是不是也遇到过这种情况，想考维修电工与电工作业证，结果网上一查五花八门的机构，有的收费高、有的证不靠谱，甚至还有被中介坑的案例？别急，今天我就从郑州金水区一位转岗电工老李的真实经历出发，给你… · 2026/11/13 19:16:28
安监局的电工证好考 2026河南最新政策怎么考更轻松 安监局的电工证好考 2026河南最新政策怎么考更轻松 你是不是也像我一样， 急需特种作业证才能上岗找工作 ？特种作业证是很多行业的门槛，尤其是电工证，几乎是电气相关岗位的必备条件。特别是2026年河南最新政策出台后，考试流程、实操内容和复审… · 2026/11/13 19:16:28
崇州报电工证官方报名入口怎么找？别再被中介坑了！ 崇州报电工证官方报名入口怎么找？别再被中介坑了！ 不知道去哪报名怕被中介坑，崇州报电工证的你，有没有遇到过这种情况？现在网上信息太多，真假难辨，一不小心就掉进中介的陷阱里。其实，崇州报电工证的官方报名入口并不难找，关键是要知道从哪入手。… · 2026/11/13 19:15:28
电工证丢失还能补吗？千万别踩坑，丢了证等于失业 电工证丢失还能补吗？千万别踩坑，丢了证等于失业 你正在找工作，但手里的电工证突然丢了，这下怎么办？别急，先别慌， 电工证丢失还能补吗 ？答案是肯定的，但 千万别踩坑 ，补办流程如果不了解，可能会耽误你上岗、甚至影响到你的收入。… · 2026/11/12 14:09:01
电力电缆作业证直播报名入口与办理流程良心建议 电力电缆作业证直播报名入口与办理流程良心建议 你是不是也担心学历不高报不了名？别急，今天就给你讲讲 电力电缆作业证直播 的报名流程和那些你必须知道的干货， 良心建议 在这里，别错过。 电力电缆作业证直播报名需要什么条件？… · 2026/11/13 5:40:45
英德电工证报考费多少钱，怕考不过白交培训费？看完这篇别再踩坑 英德电工证报考费多少钱，怕考不过白交培训费？看完这篇别再踩坑 怕考不过白交培训费？英德电工证报考费多少钱，你真的了解吗？现在市面上培训机构五花八门，价格参差不齐，很多人一不小心就花了冤枉钱，结果还考不过。别急，今天就来给你说清楚英德电工证的… · 2026/11/12 23:27:43
维修电公用考电工证吗 在哪考最靠谱 维修电公用考电工证吗 在哪考最靠谱 工地太忙根本没时间复习考试，你是维修电工，天天在项目上跑，连抽个空背个题都难。那问题来了—— 维修电公用考电工证吗 ？答案是： 必须考 。尤其是在当前施工行业，没有电工证，连进场都可能被拦下。而且，… · 2026/11/13 0:00:08
电工证是不是可以登高？含金量和证书范围你必须知道的事 电工证是不是可以登高？含金量和证书范围你必须知道的事 证书过期了不知道怎么复审延期，这事儿很多人遇到过，尤其是像你这样在郑州金水区做劳务班组负责人，手里握着几十个工人的证书，稍微一疏忽，就可能影响工程进度和公司信誉。特别是电工证是不是可以登… · 2026/11/13 0:00:08
鸡西电工证哪家下证快官方报名入口怎么找 鸡西电工证哪家下证快官方报名入口怎么找 你是不是也担心 学历不高怕报不上名 ？别急，今天我就来跟你说说， 鸡西电工证哪家下证快 ，还有 官方报名入口 到底怎么找，别让那些“代办”“代考”耽误了你的机会。… · 2026/11/13 0:00:08
双极步进电机控制实战：DRV8818PWPR与PIC18F86K22驱动调试 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/13 6:12:21
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/13 6:11:51
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/12 21:15:21
