<!DOCTYPE html>
<html lang="en">
<style>
*{
margin: 0;
padding: 0;
}
</style>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机密码</title>
</head>
<script>
function changeV() {
var range = document.getElementById("range");
document.getElementById("temValue").innerHTML = range.value;
}
function copyHandle() {
let content = document.getElementById("passWord").value;
let copy = (e) => {
e.preventDefault()
e.clipboardData.setData('text/plain', content)
alert('复制成功')
document.removeEventListener('copy', copy)
}
document.addEventListener('copy', copy)
document.execCommand("Copy");
}
function randomStr() {
let upperLetterIs = document.getElementById("upperLetter").checked;
let lowerLetterIs = document.getElementById("lowerLetter").checked;
let digitIs = document.getElementById("digit").checked;
let specialStrIs = document.getElementById("specialStr").checked;
let length = document.getElementById("range").value;
if (upperLetterIs == true) {
//定义随机数的取值字符数组
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
}
if (lowerLetterIs == true) {
var str = 'abcdefghijklmnopqrstuvwxyz';
}
if (digitIs == true) {
var str = '0123456789';
}
if (upperLetterIs == true && lowerLetterIs == true) {
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
}
if (upperLetterIs == true && digitIs == true) {
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
}
if (lowerLetterIs == true && digitIs == true) {
var str = 'abcdefghijklmnopqrstuvwxyz0123456789';
}
if (upperLetterIs == true && lowerLetterIs == true && digitIs == true) {
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
}
//定义返回值
let result = '';
//遍历
for (let i = 0; i < length; i++) {
// 取随机下标
let index = Math.floor(Math.random() * str.length);
//拼接在result后面
result += str[index];
}
//返回
return result;
}
</script>
<body>
<div class="main">
<h1>随机密码生成器</h1>
<input type="text" id="passWord">
<button onclick='document.getElementById("passWord").value = randomStr();'>生成</button>
<button onclick="copyHandle()">复制</button>
<br>
密码长度：
<span id="temValue">8</span>
<input id="range" type="range" min="0" max="20" value="8" step="1" onchange="changeV()">
<br>
所用字符：
<input type="checkbox" id="upperLetter">ABC
<input type="checkbox" id="lowerLetter" checked>abc
<input type="checkbox" id="digit" checked>123
<input type="checkbox" id="specialStr">#$&
</div>
</body>
<script>
// 文本框初始化赋值
document.getElementById("passWord").value = randomStr();
// 获取复选框的引用
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
// 监听每个复选框的变化事件
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', handleCheckboxChange);
});
// 处理复选框变化事件的函数
function handleCheckboxChange() {
// 在这里执行所需的代码
document.getElementById("passWord").value = randomStr();
console.log('One or more checkboxes have changed.');
}
</script>
<style>
.main {
text-align: center;
}
.main > * {
margin: 10px 0; /* 设置上下外边距为 10px，左右外边距为 0 */
}
h1{
padding-top: 2em;
}
</style>
</html>
发表回复