用 HTML+JS 写个实用小工具 - 在线密码生成器

麻辣小龙虾

今天给大家分享一个实用的 HTML+JS 小工具——在线密码生成器。这个工具可以生成高强度随机密码，支持自定义长度和字符类型，完全本地运行，安全又方便！
一、功能介绍

支持 8-32 位密码长度自定义
可选择包含大写字母、小写字母、数字、特殊符号
一键复制密码到剪贴板
纯前端实现，无需服务器，安全隐私

二、完整代码
直接保存为 .html 文件即可使用：

<html>
<head>
<meta charset="UTF-8">
<title>在线密码生成器</title>
<style>
body{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center;font-family:Arial;}
.container{background:white;padding:40px;border-radius:20px;max-width:500px;}
.password-display{background:#f5f5f5;padding:20px;border-radius:10px;font-size:20px;margin:20px 0;}
</style>
</head>
<body>
<div class="container">
<h1>在线密码生成器</h1>
<div class="password-display" id="password">点击生成密码</div>
<label>长度:<input type="range" id="length" min="8" max="32" value="16"></label><br>
<label><input type="checkbox" id="uppercase" checked>大写</label>
<label><input type="checkbox" id="lowercase" checked>小写</label>
<label><input type="checkbox" id="numbers" checked>数字</label>
<label><input type="checkbox" id="symbols" checked>符号</label><br>
<button onclick="generatePassword()">生成密码</button> <button onclick="copyPassword()">复制密码</button>
</div>
<script>
const chars={uppercase:"ABCDEFGHIJKLMNOPQRSTUVWXYZ",lowercase:"abcdefghijklmnopqrstuvwxyz",numbers:"0123456789",symbols:"!@#$%^&*()"};
function generatePassword(){const len=document.getElementById("length").value;let set="";if(document.getElementById("uppercase").checked)set+=chars.uppercase;if(document.getElementById("lowercase").checked)set+=chars.lowercase;if(document.getElementById("numbers").checked)set+=chars.numbers;if(document.getElementById("symbols").checked)set+=chars.symbols;let pwd="";for(let i=0;i<len;i++)pwd+=set.charAt(Math.floor(Math.random()*set.length));document.getElementById("password").textContent=pwd;}
function copyPassword(){const pwd=document.getElementById("password").textContent;navigator.clipboard.writeText(pwd).then(()=>alert("已复制!"));}
</script>
</body>
</html>

三、使用说明

保存代码 - 将上面代码复制保存为 password-generator.html
打开使用 - 双击文件用浏览器打开即可
调整设置 - 拖动滑块调整密码长度，勾选需要的字符类型
生成密码 - 点击生成密码按钮
复制使用 - 点击复制密码一键复制

四、扩展建议

可以添加密码强度指示器
可以添加生成历史记录
可以添加自定义特殊字符功能
可以打包成浏览器扩展

这个小工具完全本地运行，不会上传任何数据到服务器，安全放心！

[JavaScript] 用 HTML+JS 写个实用小工具 - 在线密码生成器

浏览过的版块

麻辣小龙虾 LV2