Logo

菜单

发布于 2026-01-06 0 阅读
0

使用 HTML、CSS 和 Javascript 的密码生成器：HTML 布局、CSS 样式、Javascript 逻辑

使用 HTML、CSS 和 Javascript 的密码生成器

HTML布局

CSS样式

JavaScript 逻辑

==================================================

照片由Unsplash上的Markus Spiske拍摄

亲爱的读者，

让我们来构建一个密码生成器，它可以生成不同长度的密码，并且可以根据用户的选择在生成的密码中包含或排除特殊字符。这很简单。请跟随我的讲解直到最后。🔐

文件夹结构：

  1. index.html — 包含 HTML 布局，定义了页面上显示的元素结构。
  2. style.css 文件包含用于设置样式的 CSS 代码。使用 CSS，我们可以设置不同部分的样式，使它们更具视觉吸引力。
  3. script.js — 包含 Javascript 代码，所有函数都放置在其中。

HTML布局

打开 VSCode，按 ! 键，然后按 Tab 键，在index.html文件中创建基本的 HTML 结构。将标题设置为“密码生成器”。将style.css和script.js链接到创建的 HTML 文件，并将FontAwesome CSS 链接到该文件以使用图标。 *

生成密码按钮：在div类容器内创建一个按钮，点击该按钮即可生成密码。添加到显示图标。<i class=”fab fa-keycdn”></i>

<button id="generate" class="action-btn">Generate Password <i class="fab fa-keycdn"></i></button>
Enter fullscreen mode Exit fullscreen mode

用于选择密码长度的滑块：在`.slider_main` 类内添加一个名为 ` slider_main`的 div 元素。`.slider_main`类包含一个用于选择密码长度的滑块。最小值、最大值和初始值均已设置，使用滑块选择的值将显示在输出区域。

<div class="slider\_main">
 <input type="range" value="8" min="1" max="25" class="slider"oninput="this.nextElementSibling.value = this.value" id="slider">
 <output>8</output>
</div>
Enter fullscreen mode Exit fullscreen mode

复选框用于包含特殊字符：添加一个类型为复选框的输入标签，选中该标签后，我们将在密码中包含特殊字符；取消选中该标签后，我们将从密码中删除特殊字符。

<label class="container" style="font-family: fantasy;color: rgb(3, 3, 3);">Include special characters
            <input type="checkbox" checked="checked" id="checkbox">
            <span class="checkmark"></span>
        </label>
Enter fullscreen mode Exit fullscreen mode

密码显示和复制按钮：在 div 类wrapper_main下添加一个h5标签来显示生成的密码，并添加一个按钮来复制生成的密码。使用剪贴板图标。<i class=”fas fa-clipboard”>

<div class="wrapper_main">
        <h5 id="pwd_txt"></h5>
        <button id="clipboard" class="clipboard">
            <i class="fas fa-clipboard"></i>
        </button>
</div>
Enter fullscreen mode Exit fullscreen mode

以下是完整的HTML代码：

 <!DOCTYPE html>
<html lang="en">

<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>Password Generator</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link rel="stylesheet" href="style.css"> 
</head>

<body>
    <div class="wrapper">
        <button id="generate" class="action-btn">
            Generate Password <i class="fab fa-keycdn"></i>
        </button>
        <div class="slider_main">
            <input type="range" value="8" min="1" max="25" class="slider"
                oninput="this.nextElementSibling.value = this.value" id="slider">
            <output>8</output>
        </div>
        <label class="container" style="font-family: fantasy;color: rgb(3, 3, 3);">Include special characters
            <input type="checkbox" checked="checked" id="checkbox">
            <span class="checkmark"></span>
        </label>
    </div>



    <div class="wrapper_main">
        <h5 id="pwd_txt"></h5>
        <button id="clipboard" class="clipboard">
            <i class="fas fa-clipboard"></i>
        </button>
    </div>
    <script src="script.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

CSS样式

实现一个滑块来覆盖默认滑块，鼠标悬停在滑块上会使其透明度降低。

.slider{

-webkit-appearance: none;
width: 70%;
height: 10px;
background: #f7be04;
border-radius: 15px;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
margin-left: 40px;
margin-top: 25px;
margin-bottom: 20px;
}

.slider:hover{
opacity: 0.5;
}
Enter fullscreen mode Exit fullscreen mode

完整的 CSS 代码在这里

html{
min-height: 100%;
}



body{
min-height: 100%;
background-color: #2d3436;
background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
text-align: center;
}



.slider{
-webkit-appearance: none;
width: 70%;
height: 10px;
background: #f7be04;
border-radius: 15px;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
margin-left: 40px;
margin-top: 25px;
margin-bottom: 20px;
}

.slider:hover{
opacity: 0.5;
}

.slider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 15px;
height: 15px;
background: #000000;
border-radius: 50%;
cursor: pointer;
}

.action-btn{
background-color: #000;
border: 0;
color: #f7be04;
font-size: 20px;
cursor: pointer
padding: 10px;
margin: 10px  20px;
border-radius: 15px;
font-family: fantasy;
opacity: 1;
transition: opacity .2s;
}



.action-btn:hover{
opacity: 0.5;
}



.wrapper{
display: flex;
background-color: rgb(253, 253, 252);
flex-direction: column;
width: 30%;
margin-top: 10%;
margin-left: 35%;
border-radius: 15px;
font-family: fantasy;
padding-bottom: 1%;
}

.slider_main{
display: flex;
flex-direction: row;
}

output{
margin-top: 20px;
margin-left: 10px;
}



.wrapper_main
{
display: flex;
background-color: rgb(253, 253, 252);
flex-direction: row;
width: 22%;
margin-top: 5%;
margin-left: 38%;
border-radius: 15px;
font-family: Georgia, serif;
padding-left: 45px;
}



.clipboard{
margin-left: auto;
cursor: pointer;
border: 0;
background-color: white;
color:black;
border-radius: 15px;
font-size: 23px;
opacity: 1;
transition: opacity .2s;
}



.clipboard:hover{
opacity: 0.5;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript 逻辑

我们需要通过随机选择字符来生成密码。用户输入的长度滑块值将决定密码的长度，用户还可以通过复选框选择是否包含特殊字符。为了实现此功能，让我们获取所需的元素并将它们存储在以下常量和变量中。

password_ele — 用于存储设置生成的密码的h5元素。

字符串 — 用于存储生成密码时使用的字符（特殊字符除外）。

special_chars —用于存储特殊字符，根据复选框的值，我们可以向密码添加特殊字符。

生成 — 用于存储“生成密码”按钮。

剪贴板 — 用于存储剪贴板按钮。

pwd_length — 用于存储滑块元素。

const password_ele = document.getElementById("pwd_txt");

var string = "ABCDEFGHIJKLMNOPQRSTUVWXYZacdefghijklnopqrstuvwxyz0123456789";

const special_chars = "@#$%^&*";

const generate = document.getElementById("generate");

const clipboard = document.getElementById("clipboard");

var pwd_length = document.getElementById("slider");
Enter fullscreen mode Exit fullscreen mode

点击“生成密码”按钮后，我们将执行一些代码，使用Math.random()函数生成密码。如果选中复选框，我们将向原始字符串添加特殊字符。原始字符串包含“ABCDEFGHIJKLMNOPQRSTUVWXYZacdefghijklnopqrstuvwxyz0123456789”.

遍历字符串，随机选取一个字符，并在每次循环中将随机选取的字符添加到初始为空的密码变量中。循环执行的次数等于滑块的长度，因此，密码的长度将等于用户输入的长度。

generate.addEventListener('click', () => {
    let password = "";
    var checked = document.getElementById("checkbox").checked;
    var final_string = string;
    console.log(checked);
    if (checked) {
        final_string += "@#$%^&*";
    }
    for (var i = 0; i < pwd_length.value; i++) {
        let pwd = final_string[Math.floor(Math.random() * final_string.length)];
        password += pwd;
    }
    password_ele.innerText = password;
    final_string = string;
});
Enter fullscreen mode Exit fullscreen mode

点击剪贴板图标时，应选中密码文本并显示提示信息。



clipboard.addEventListener('click', () => {

 navigator.clipboard.writeText(password_ele.innerText);

 alert("Password copied to clipboard");

});
Enter fullscreen mode Exit fullscreen mode

完整的JavaScript代码在这里，

const password_ele = document.getElementById("pwd_txt");
var string = "ABCDEFGHIJKLMNOPQRSTUVWXYZacdefghijklnopqrstuvwxyz0123456789";
const special_chars = "@#$%^&*";
const generate = document.getElementById("generate");
const clipboard = document.getElementById("clipboard");
var pwd_length = document.getElementById("slider");


generate.addEventListener('click', () => {
    let password = "";
    var checked = document.getElementById("checkbox").checked;
    var final_string = string;
    console.log(checked);
    if (checked) {
        final_string += "@#$%^&*";
    }
    for (var i = 0; i < pwd_length.value; i++) {
        let pwd = final_string[Math.floor(Math.random() * final_string.length)];
        password += pwd;
    }
    password_ele.innerText = password;
    final_string = string;
});


clipboard.addEventListener('click', () => {
    navigator.clipboard.writeText(password_ele.innerText);
    alert("Password copied to clipboard");
});
Enter fullscreen mode Exit fullscreen mode

我们来检查一下输出结果。

完整代码已上传至GitHub。

感谢您的关注。

文章来源：https://dev.to/divyamcm/password-generator-using-html-css-and-javascript-3a0c
JavaScript 数据结构：双...
实现快照感知数据结构