DeepSeek生成超棒的在线密码生成器
让DeepSeek生成一个超棒的在线密码生成器，告别想密码的烦恼和弱密码的隐患。
提示词prompt
帮我生成一个在线密码生成器，基于HTML5，支持生成的密码包含大小写字母，数字，特殊符号等，包括混合密码和纯字母，纯数字等密码。用户可以自定义密码生成位数，给出生成8位，16位，32位的密码位数的快捷选项。如果用户不满意生成的密码 可以点击再次生成 密码有快捷复制的按钮 方便用户复制密码。
使用方法
您可以将此代码保存为HTML文件，然后在浏览器中打开使用。
在线密码生成器所有源码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线密码生成器</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.checkbox-item {
display: flex;
align-items: center;
}
.checkbox-item input {
margin-right: 8px;
}
.length-controls {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.quick-length {
display: flex;
gap: 10px;
}
.quick-length button {
padding: 5px 10px;
background-color: #e0e0e0;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.quick-length button:hover {
background-color: #d0d0d0;
}
input[type="number"] {
width: 80px;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.result {
margin-top: 30px;
}
.password-display {
display: flex;
margin-bottom: 20px;
}
.password-display input {
flex-grow: 1;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
font-family: monospace;
}
.password-display button {
padding: 10px 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.3s;
}
.password-display button:hover {
background-color: #2980b9;
}
.action-buttons {
display: flex;
gap: 10px;
}
.action-buttons button {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}
.generate-btn {
background-color: #2ecc71;
color: white;
}
.generate-btn:hover {
background-color: #27ae60;
}
.reset-btn {
background-color: #e74c3c;
color: white;
}
.reset-btn:hover {
background-color: #c0392b;
}
.strength-meter {
height: 10px;
background-color: #eee;
border-radius: 5px;
margin-top: 10px;
overflow: hidden;
}
.strength-bar {
height: 100%;
width: 0;
transition: width 0.3s, background-color 0.3s;
}
.tips {
margin-top: 30px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 4px;
font-size: 14px;
}
.tips h3 {
margin-top: 0;
color: #2c3e50;
}
</style>
</head>
<body>
<div class="container">
<h1>在线密码生成器</h1>
<div class="form-group">
<label for="length">密码长度:</label>
<div class="length-controls">
<input type="number" id="length" min="4" max="128" value="12">
<div class="quick-length">
<button onclick="setLength(8)">8位</button>
<button onclick="setLength(16)">16位</button>
<button onclick="setLength(32)">32位</button>
</div>
</div>
</div>
<div class="form-group">
<label>包含字符类型:</label>
<div class="checkbox-group">
<div class="checkbox-item">
<input type="checkbox" id="lowercase" checked>
<label for="lowercase">小写字母 (a-z)</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="uppercase" checked>
<label for="uppercase">大写字母 (A-Z)</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="numbers" checked>
<label for="numbers">数字 (0-9)</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="symbols" checked>
<label for="symbols">特殊符号 (!@#$%^&*)</label>
</div>
</div>
</div>
<div class="form-group">
<label>密码类型预设:</label>
<div class="checkbox-group">
<button onclick="setPreset('mixed')">混合密码</button>
<button onclick="setPreset('letters')">纯字母</button>
<button onclick="setPreset('numbers')">纯数字</button>
<button onclick="setPreset('symbols')">纯符号</button>
</div>
</div>
<div class="action-buttons">
<button class="generate-btn" onclick="generatePassword()">生成密码</button>
<button class="reset-btn" onclick="resetForm()">重置选项</button>
</div>
<div class="result">
<h2>生成的密码</h2>
<div class="password-display">
<input type="text" id="password" readonly>
<button onclick="copyPassword()">复制</button>
</div>
<div class="strength-meter">
<div class="strength-bar" id="strength-bar"></div>
</div>
<button onclick="generatePassword()">重新生成</button>
</div>
<div class="tips">
<h3>密码安全提示</h3>
<ul>
<li>建议使用至少12位字符的密码</li>
<li>混合使用大小写字母、数字和特殊符号</li>
<li>避免使用个人信息或常见词汇</li>
<li>不同网站/服务使用不同密码</li>
<li>定期更换重要账户的密码</li>
</ul>
</div>
</div>
<script>
// 字符集定义
const charSets = {
lowercase: 'abcdefghijklmnopqrstuvwxyz',
uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
numbers: '0123456789',
symbols: '!@#$%^&*()_+-=[]{}|;:,.<>?'
};
// 设置密码长度
function setLength(length) {
document.getElementById('length').value = length;
}
// 设置预设
function setPreset(type) {
const checkboxes = {
lowercase: document.getElementById('lowercase'),
uppercase: document.getElementById('uppercase'),
numbers: document.getElementById('numbers'),
symbols: document.getElementById('symbols')
};
// 重置所有选项
for (const key in checkboxes) {
checkboxes[key].checked = false;
}
// 根据预设设置选项
switch(type) {
case 'mixed':
checkboxes.lowercase.checked = true;
checkboxes.uppercase.checked = true;
checkboxes.numbers.checked = true;
checkboxes.symbols.checked = true;
break;
case 'letters':
checkboxes.lowercase.checked = true;
checkboxes.uppercase.checked = true;
break;
case 'numbers':
checkboxes.numbers.checked = true;
break;
case 'symbols':
checkboxes.symbols.checked = true;
break;
}
}
// 重置表单
function resetForm() {
document.getElementById('length').value = 12;
document.getElementById('lowercase').checked = true;
document.getElementById('uppercase').checked = true;
document.getElementById('numbers').checked = true;
document.getElementById('symbols').checked = true;
document.getElementById('password').value = '';
updateStrengthBar(0);
}
// 生成密码
function generatePassword() {
const length = parseInt(document.getElementById('length').value);
const useLowercase = document.getElementById('lowercase').checked;
const useUppercase = document.getElementById('uppercase').checked;
const useNumbers = document.getElementById('numbers').checked;
const useSymbols = document.getElementById('symbols').checked;
// 验证至少选择了一种字符类型
if (!useLowercase && !useUppercase && !useNumbers && !useSymbols) {
alert('请至少选择一种字符类型！');
return;
}
// 构建可用字符集
let chars = '';
if (useLowercase) chars += charSets.lowercase;
if (useUppercase) chars += charSets.uppercase;
if (useNumbers) chars += charSets.numbers;
if (useSymbols) chars += charSets.symbols;
// 生成密码
let password = '';
const charsLength = chars.length;
for (let i = 0; i < length; i++) {
password += chars.charAt(Math.floor(Math.random() * charsLength));
}
// 显示密码
document.getElementById('password').value = password;
// 计算并显示密码强度
const strength = calculatePasswordStrength(password);
updateStrengthBar(strength);
}
// 计算密码强度 (0-100)
function calculatePasswordStrength(password) {
let strength = 0;
const length = password.length;
// 长度贡献 (最大50分)
strength += Math.min(length * 2, 50);
// 字符种类贡献 (最大50分)
let charTypes = 0;
if (password.match(/[a-z]/)) charTypes++;
if (password.match(/[A-Z]/)) charTypes++;
if (password.match(/[0-9]/)) charTypes++;
if (password.match(/[^a-zA-Z0-9]/)) charTypes++;
strength += (charTypes - 1) * 12.5; // 每种额外类型加12.5分
return Math.min(Math.round(strength), 100);
}
// 更新强度条
function updateStrengthBar(strength) {
const bar = document.getElementById('strength-bar');
bar.style.width = strength + '%';
// 根据强度设置颜色
if (strength < 30) {
bar.style.backgroundColor = '#e74c3c'; // 弱 - 红色
} else if (strength < 70) {
bar.style.backgroundColor = '#f39c12'; // 中 - 橙色
} else {
bar.style.backgroundColor = '#2ecc71'; // 强 - 绿色
}
}
// 复制密码
function copyPassword() {
const passwordField = document.getElementById('password');
if (!passwordField.value) {
alert('请先生成密码！');
return;
}
passwordField.select();
document.execCommand('copy');
// 显示复制成功的反馈
const copyButton = document.querySelector('.password-display button');
const originalText = copyButton.textContent;
copyButton.textContent = '已复制！';
setTimeout(() => {
copyButton.textContent = originalText;
}, 2000);
}
// 页面加载时生成一个初始密码
window.onload = function() {
generatePassword();
};
</script>
</body>
</html>
扫一扫
441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
