小影志 大神 , 随机密码生成器
今天突然想弄个，纯前端生成密码的脚本。
找着找着找到了，小影志大神 分享到工具箱。
果断收藏起来，并扒下代码准备学习一下。感谢大神的分享。
看着大神 - 随机密码生成器 - 原生js脚本，很精炼；
让我找到了，最初接触js脚本，为它的灵活着迷的感觉；
感觉自己还是好渣渣。html,js的源码 (样式不粘贴了)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form id="main" class="pure-form">
<ul>
<li><label><input type="checkbox" name="include_number" checked /><span>数字</span></label></li>
<li><label><input type="checkbox" name="include_lowercaseletters" checked /><span>小写字母</span></label></li>
<li><label><input type="checkbox" name="include_uppercaseletters" checked /><span>大写字母</span></label></li>
<li><label><span>特殊符号</span><input type="text" name="special_characters" placeholder="输入需要添加的特殊符号" /></label></li>
<li><label><span>排除字符</span><input type="text" name="exclude_characters" placeholder="比如：i, l, 1, L, o, 0, O" /></label></li>
<li><label><input type="checkbox" name="password_unique" /><span>字符不重复</span></label></li>
<li><label><span>密码长度</span><input type="number" name="password_length" min="0" value="8" /></label></li>
<li><label><span>密码数量</span><input type="number" name="password_quantity" min="0" value="1" /></label></li>
</ul>
<button type="button" id="generate" class="pure-button pure-button-primary pure-input-1">生成密码</button>
<textarea name="output" class="pure-input-1" cols="40" rows="7" readonly></textarea>
</form>
<script>
// 表单
var form = document.getElementById('main');
// 随机数
function rand(max) {
return Math.floor(Math.random() * max);
}
// 随机密码生成器
// 原生js 表单内通过name去寻找Element
document.getElementById('generate').onclick = function() {
var chars = ''; // 密码可包含的文字
var passwords = []; // 密码列表
var passwordUnique = form.password_unique.checked; // 字符是否重复
var quantity = Number(form.password_quantity.value); // 生成密码数量
if (form.include_number.checked) chars += '0123456789'; // 0-9
if (form.include_lowercaseletters.checked) chars += 'abcdefghijklmnopqrstuvwxyz'; // a-z
if (form.include_uppercaseletters.checked) chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // A-Z
if (form.special_characters.value) chars += form.special_characters.value; // 允许的特殊符号
if (form.exclude_characters.value) chars = chars.replace(new RegExp(form.exclude_characters.value.split('').join(
'|'), 'g'), ''); // 排除某些文字
while (passwords.length < quantity) {
var _chars = chars.split('');
var password = '';
for (var i = 0, l = form.password_length.value; i < l; i++) {
if (_chars.length < 1) break; // 密码不能包含任何文字 直接跳出
var idx = rand(_chars.length);
password += _chars[idx];
if (passwordUnique) _chars.splice(idx, 1);
}
if (passwords.indexOf(password) === -1) passwords.push(password); // 当前生成的密码与之前不同时，添加至密码列表
}
form.output.value = passwords.join('\n'); // 输出生成的密码列表
};
// 很人性化的交互; 获取光标就，自动全选
form.output.onfocus = function() {
this.select();
};
// 加载 随机生成密码要求
function loadConfig() {
var config = JSON.parse(localStorage.getItem('passwordConfig'));
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
// Object.keys 返回的是 string[]
Object.keys(config).forEach(function(name) {
var value = config[name];
var input = form[name];
if (input.type === 'checkbox') {
input.checked = value;
} else {
input.value = value;
}
});
}
// 保存 当前随机生成密码的要求
function saveConfig() {
var config = {};
// https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByTagName
// getElementsByTagName 返回的 HTML集合 ；根据上面API的介绍，存在浏览器兼容问题 (浏览器返回类型不一致)
// 此刻[].forEach充当迭代器的作用
[].forEach.call(form.getElementsByTagName('input'), function(input) {
// 读取input的值
// 是 复选框 => 获取 checked 属性
// 非 复选框 => 获取 value 属性
config[input.name] = input.type === 'checkbox' ? input.checked : input.value;
});
// 本地永久缓存 密码配置信息
localStorage.setItem('passwordConfig', JSON.stringify(config));
}
[].forEach.call(form.getElementsByTagName('input'), function(input) {
// 监听 input 标签变更事件
input.addEventListener('change', saveConfig);
});
// 如果存在密码配置信息，就读取
if (localStorage.getItem('passwordConfig')) {
loadConfig();
}
</script>
</body>
</html>小影志 大神分享的网页工具箱
