Skip to content

Commit da365fc

Browse files
CommandstoneCommandstone
authored
Create mm.html
1 parent 1b85039 commit da365fc

File tree

1 file changed

+215
-0
lines changed

1 file changed

+215
-0
lines changed

‎tool/mm.html‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>密码生成器</title>
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
margin: 0;
11+
padding: 0;
12+
font-family: 'Segoe UI', sans-serif;
13+
}
14+
15+
body {
16+
background: #1a1a1a;
17+
min-height: 100vh;
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
padding: 20px;
22+
}
23+
24+
.container {
25+
background: #2d2d2d;
26+
padding: 2rem;
27+
border-radius: 12px;
28+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
29+
width: 100%;
30+
max-width: 500px;
31+
}
32+
33+
h1 {
34+
color: #00ff88;
35+
text-align: center;
36+
margin-bottom: 1.5rem;
37+
}
38+
39+
.password-display {
40+
position: relative;
41+
margin-bottom: 1.5rem;
42+
}
43+
44+
#password {
45+
width: 100%;
46+
padding: 1rem;
47+
font-size: 1.2rem;
48+
border: 2px solid #3d3d3d;
49+
border-radius: 8px;
50+
background: #1f1f1f;
51+
color: #00ff88;
52+
outline: none;
53+
}
54+
55+
#copyBtn {
56+
position: absolute;
57+
right: 10px;
58+
top: 50%;
59+
transform: translateY(-50%);
60+
background: #00ff88;
61+
border: none;
62+
padding: 5px 10px;
63+
border-radius: 5px;
64+
cursor: pointer;
65+
transition: 0.3s;
66+
}
67+
68+
#copyBtn:hover {
69+
opacity: 0.8;
70+
}
71+
72+
.options {
73+
display: grid;
74+
gap: 1rem;
75+
}
76+
77+
.option-group {
78+
display: flex;
79+
justify-content: space-between;
80+
align-items: center;
81+
padding: 0.8rem;
82+
background: #363636;
83+
border-radius: 8px;
84+
}
85+
86+
label {
87+
color: #fff;
88+
font-size: 0.9rem;
89+
}
90+
91+
#length {
92+
width: 60px;
93+
padding: 0.3rem;
94+
background: #1f1f1f;
95+
border: 1px solid #3d3d3d;
96+
color: #00ff88;
97+
border-radius: 4px;
98+
}
99+
100+
#generateBtn {
101+
width: 100%;
102+
padding: 1rem;
103+
background: #00ff88;
104+
border: none;
105+
border-radius: 8px;
106+
font-weight: bold;
107+
cursor: pointer;
108+
transition: 0.3s;
109+
}
110+
111+
#generateBtn:hover {
112+
transform: translateY(-2px);
113+
box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3);
114+
}
115+
116+
.copied-notice {
117+
color: #00ff88;
118+
text-align: center;
119+
margin-top: 1rem;
120+
opacity: 0;
121+
transition: 0.3s;
122+
}
123+
</style>
124+
</head>
125+
<body>
126+
<div class="container">
127+
<h1>密码生成器</h1>
128+
129+
<div class="password-display">
130+
<input type="text" id="password" readonly>
131+
<button id="copyBtn" onclick="copyPassword()">复制</button>
132+
</div>
133+
134+
<div class="options">
135+
<div class="option-group">
136+
<label>密码长度：</label>
137+
<input type="number" id="length" min="6" max="50" value="12">
138+
</div>
139+
140+
<div class="option-group">
141+
<label>包含大写字母（A-Z）</label>
142+
<input type="checkbox" id="uppercase" checked>
143+
</div>
144+
145+
<div class="option-group">
146+
<label>包含小写字母（a-z）</label>
147+
<input type="checkbox" id="lowercase" checked>
148+
</div>
149+
150+
<div class="option-group">
151+
<label>包含数字（0-9）</label>
152+
<input type="checkbox" id="numbers" checked>
153+
</div>
154+
155+
<div class="option-group">
156+
<label>包含符号（!@#$%^&*）</label>
157+
<input type="checkbox" id="symbols">
158+
</div>
159+
</div>
160+
161+
<button id="generateBtn" onclick="generatePassword()">生成密码</button>
162+
<div class="copied-notice" id="copiedNotice">已复制到剪贴板！</div>
163+
</div>
164+
165+
<script>
166+
const characters = {
167+
uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
168+
lowercase: 'abcdefghijklmnopqrstuvwxyz',
169+
numbers: '0123456789',
170+
symbols: '!@#$%^&*()_+-=[]{}|;:,.<>?'
171+
};
172+
173+
function generatePassword() {
174+
const length = document.getElementById('length').value;
175+
const options = {
176+
uppercase: document.getElementById('uppercase').checked,
177+
lowercase: document.getElementById('lowercase').checked,
178+
numbers: document.getElementById('numbers').checked,
179+
symbols: document.getElementById('symbols').checked
180+
};
181+
182+
let chars = '';
183+
for (const [key, value] of Object.entries(options)) {
184+
if (value) chars += characters[key];
185+
}
186+
187+
if (!chars) {
188+
alert('请至少选择一种字符类型！');
189+
return;
190+
}
191+
192+
let password = '';
193+
for (let i = 0; i < length; i++) {
194+
const randomIndex = Math.floor(Math.random() * chars.length);
195+
password += chars[randomIndex];
196+
}
197+
198+
document.getElementById('password').value = password;
199+
}
200+
201+
function copyPassword() {
202+
const passwordField = document.getElementById('password');
203+
passwordField.select();
204+
document.execCommand('copy');
205+
206+
const notice = document.getElementById('copiedNotice');
207+
notice.style.opacity = '1';
208+
setTimeout(() => notice.style.opacity = '0', 2000);
209+
}
210+
211+
// 初始化生成密码
212+
generatePassword();
213+
</script>
214+
</body>
215+
</html>

0 commit comments

Comments
 (0)