当前位置：首页 > news >正文

15.5 【TS基础项目】构建随机密码生成器

news 来源：原创 2025/5/31 12:46:09

在现代 Web 应用中，生成强大而安全的密码对于保护用户账户免受未经授权访问至关重要。使用 TypeScript 构建一个随机密码生成器，可以通过混合字母、数字和特殊字符来创建不可预测、复杂的密码，从而显著提升安全性。

我们要构建什么？

本项目旨在创建一个随机密码生成器应用，其功能包括：

根据用户指定的长度生成随机密码；
支持包含大写字母、小写字母、数字和特殊字符；
用户可自定义密码的复杂度与长度；
将生成的密码显示在界面上，方便一键复制。

项目预览

这是一个简洁实用的随机密码生成器页面。用户可以指定密码长度，并点击按钮生成符合要求的密码。

HTML 与 CSS 设置

下面是该应用的 HTML 与 CSS 代码，包含了结构与样式，表单允许用户输入所需密码长度并生成密码：

HTML + CSS 示例代码

<html><head><style>body {font-family: Arial, sans-serif;background-color: #f4f7fc;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {text-align: center;padding: 20px;border: 2px solid #ddd;border-radius: 10px;background-color: #fff;width: 300px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);}h1 {color: #333;}label {font-size: 16px;}input[type="number"] {width: 80px;padding: 5px;margin: 10px;border-radius: 4px;border: 1px solid #ccc;}button {padding: 10px 20px;background-color: #4caf50;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;}button:hover {background-color: #45a049;}.password-display input {margin-top: 20px;padding: 10px;width: 80%;font-size: 18px;border-radius: 4px;border: 1px solid #ccc;background-color: #f9f9f9;text-align: center;}</style></head><body><div class="container"><h1>Random Password Generator</h1><label for="passwordLength">Password Length:</label><input type="number" id="passwordLength" value="12" min="8" max="20" /><button id="generateButton">Generate Password</button><div class="password-display"><input type="text" id="password" readonly /></div></div></body>
</html>

说明：

HTML 创建了一个表单，包含输入框（指定密码长度）和按钮（生成密码）。
CSS 样式设计简洁，包含边框圆角、阴影与响应式居中布局。
用户可设置密码长度（最短 8，最长 20）。
生成的密码会显示在一个只读的输入框中，方便复制。

TypeScript 逻辑

下面的 TypeScript 代码负责密码的生成逻辑，结合用户输入的长度，输出包含多种字符的强密码，并将其显示在输入框中：

TypeScript 示例代码

// 生成指定长度的随机密码
function pass(length: number = 12): string {const char = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_-+=";let password = "";for (let i = 0; i < length; i++) {const ind = Math.floor(Math.random() * char.length);password += char[ind];}return password;
}// 获取按钮、输入框等 DOM 元素
const btn = document.getElementById("generateButton") as HTMLButtonElement;
const inp = document.getElementById("password") as HTMLInputElement;
const passLen = document.getElementById("passwordLength") as HTMLInputElement;// 点击按钮时生成密码
btn.addEventListener("click", () => {let length = parseInt(passLen.value, 10);if (length < 8) length = 8;if (length > 20) length = 20;const password = pass(length);inp.value = password;
});

功能说明：

pass 函数根据给定长度生成密码，字符集包含大小写英文字母、数字及特殊字符；
generateButton 按钮用于触发密码生成；
passwordLength 输入框接收用户的密码长度设置；
密码长度被限制在 8~20 之间；
最终密码会显示在 password 输入框中。

转换为 JavaScript 文件

TypeScript 代码需通过命令行编译为 JavaScript，浏览器才能识别运行。使用以下命令：

npx tsc task.ts
# 或
tsc task.ts

默认情况下，编译后的 task.js 会和 task.ts 保存在同一目录中。

完整代码

这是最终可直接运行的完整 HTML 页面，已嵌入 JavaScript（由 TypeScript 编译而来）：

<html><head><style>/* 同前略 */</style></head><body><div class="container"><h1>Random Password Generator</h1><label for="passwordLength">Password Length:</label><input type="number" id="passwordLength" value="12" min="8" max="20" /><button id="generateButton">Generate Password</button><div class="password-display"><input type="text" id="password" readonly /></div></div><script>function pass(length) {if (length === void 0) { length = 12; }var char = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_-+=";var password = "";for (var i = 0; i < length; i++) {var ind = Math.floor(Math.random() * char.length);password += char[ind];}return password;}var btn = document.getElementById("generateButton");var inp = document.getElementById("password");var passLen = document.getElementById("passwordLength");btn.addEventListener("click", function () {var length = parseInt(passLen.value, 10);if (length < 8) length = 8;if (length > 20) length = 20;var password = pass(length);inp.value = password;});</script></body>
</html>