JavaScript 密码生成器将帮助您创建您选择的密码。之前我向您展示了如何创建JavaScript 随机密码生成器。但是,此设计将为您提供手动创建密码的选项。
这个简单的密码生成器将帮助您创建您想要的密码。有不同的选项和控件。这将允许您创建所需的密码。
创建一个 HTML 文件并添加以下结构:
<div id="password-generator">
<input value="Password generator" id="password-output">
<div class="range">
<input type="range" min="4" max="24" step="1" value="8" id="password-length"
oninput="document.getElementById('display-password-length').value=this.value">
<input type="text" value="8" maxlength="2" id="display-password-length"
oninput="document.getElementById('password-length').value=this.value">
</div>
<div class="flex">
<input type="checkbox" id="lowercase" checked="checked">
<label for="lowercase">a-z</label>
<input type="checkbox" id="uppercase">
<label for="uppercase">A-Z</label>
<input type="checkbox" id="numbers">
<label for="numbers">0-9</label>
<input type="checkbox" id="symbols">
<label for="symbols">!-?</label>
</div>
<button id="generateButton" type="button" onclick="generatePassword()">Generate</button>
</div>
添加以下 CSS 来设置步进栏的样式:
@import url("https://fonts.googleapis.com/css?family=Cuprum&display=swap");
* {
box-sizing: border-box;
font-family: sans-serif;
}
input {
border: none;
background: transparent;
outline: none;
}
body {
overflow: hidden;
margin: 0;
padding: 0;
display: flex;
align-items: center;
text-align: center;
height: 100vh;
background: #0976d5;
}
body #password-generator {
padding: 2rem;
margin: 0 auto;
width: 500px;
border-radius: 3px;
box-shadow: 0 0 2px #1f1f1f;
border: 3px solid #d5d4ff;
position: relative;
background: white;
white-space: nowrap;
}
body #password-generator #password-output {
text-align: center;
font-size: 2rem;
margin: 0 auto 1.2rem;
width: 100%;
color: rgb(2, 91, 164);
padding: 5px;
box-shadow: 0 0 20px rgba(0,139,253,0.45);
}
body #password-generator .range {
justify-content: space-between;
margin-top: 20px;
margin-bottom: 60px;
max-width: 70%;
margin-left: 15%;
padding: .4rem 1rem .8rem 2.5rem;
border: 1.5px solid rgb(8, 84, 181);
}
body #password-generator .range input[type=range] {
-webkit-appearance: none;
appearance: none;
width: 40%;
max-width: 100%;
height: 15px;
padding: 0px;
background: #7a7a82;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
box-shadow: 0 2px 35px rgba(0, 0, 0, 0.4555);
border-radius: 10px;
cursor: pointer;
scroll-behavior: smooth;
z-index: 1;
}
body #password-generator .range input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: rgb(9, 71, 222);
cursor: pointer;
border-radius: 18px;
transition: 0.5s ease;
}
body #password-generator .range #display-password-length {
text-align: center;
font-size: 1.4rem;
width: 80px;
padding-top: 10px;
}
body #password-generator .flex {
margin: 1rem 1rem 2rem;
display: flex;
justify-content: space-between;
}
body #password-generator .flex input {
display: none;
}
body #password-generator .flex input:checked + label {
border: 2px solid rgb(205, 151, 12);
background: rgb(173, 144, 82);
filter: brightness(120%);
transform: scale(1.1);
}
body #password-generator .flex label {
border: 2px solid #0571bb;
border-radius: 4px;
padding: 0.6rem;
cursor: pointer;
font-size: 1.3rem;
text-align: center;
display: block;
width: 80px;
transition: 0.2s ease;
}
body #password-generator button {
outline: none;
background: #0f6cc3;
color: white;
border: none;
padding: 1rem 2rem;
margin: 0.5rem 0;
border-radius: 3px;
box-shadow: 1px 1px 6px 1px #8f8a8a;
text-transform: uppercase;
font-size: 1.2rem;
transition: 0.2s ease;
cursor: pointer;
}
body #password-generator button:hover {
background: rgb(173, 118, 22);
}
添加 JavaScript 代码来控制步进栏行为:
const passwordOutput = document.getElementById('password-output');
const dataLowercase = "azertyuiopqsdfghjklmwxcvbn".split('');
const dataUppercase = "AZERTYUIOPQSDFGHJKLMWXCVBN".split('');
const dataNumbers = "0123456789".split('');
const dataSymbols = "!@#$%^&*-_=+\|:;',.>/?~".split('');
function generatePassword() {
const data = [].concat(
lowercase.checked ? dataLowercase : [],
uppercase.checked ? dataUppercase : [],
numbers.checked ? dataNumbers : [],
symbols.checked ? dataSymbols : []
);
let passwordLength = parseInt(document.getElementById('display-password-length').value);
let newPassword = '';
if (data.length === 0) {
passwordOutput.innerHTML = "Générateur de MDP";
alert('Please check at least one criteria');
return;
}
for (let i = 0; i < passwordLength; i++) {
newPassword += data[Math.floor(Math.random() * data.length)];
}
passwordOutput.value = newPassword;
passwordOutput.select();
document.execCommand('copy');
generateButton.innerHTML = "Copied !";
setTimeout(() => {generateButton.innerHTML = "Generator Again"}, 3500);
}
希望通过上面的代码,您已经了解了如何使用 JavaScript 创建此密码生成器。早些时候我分享了一个关于随机密码生成器的教程。
如果您想创建一个简单的密码生成器,那么您可以按照该教程进行操作。下面是一个允许您下载源代码的按钮。如果有任何问题,您可以通过评论让我知道。