简易密码生成器（ES6）

原创已于 2024-09-21 14:36:39 修改 · 623 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #前端 #javascript

于 2024-09-21 11:50:41 首次发布

一、效果展示（动画）：

二、实现功能：

功能一：

是否选中大写字母、数字、字符的复选框，来决定密码中包含的内容（小写字母、大写字母、数字、特殊字符）

功能二：

能通过拖动滑块来调整生成密码的长度

功能三：

点击按钮生成密码

功能四：

能够将生成的密码一键复制

三、思路

功能一：

用一个对象存储三个复选框的选中状态，给复选框添加监听事件，将对象中对应的元素的值改为与复选框状态相同的值。

生成密码：初始将所有小写字母存放在一个str变量中，如果想要生成的密码包含大小写字母，就将所有的大写字母添加到str变量中，然后根据str随机生成几个索引，通过索引找到str中的字符，然后将这些随机找到的字符添加到一个空变量中，这就是生成的密码。根据存储复选框状态的对象，来将str添加（大写字母、数字、字符...）根据这个str随机生成一个新的字符，这个新的字符就是随机生成的密码。

功能二：

<input type="range" min="5" max="20" value="5" class="slider" data-js-selector="slider" />
<span class="value">5</span>

利用input得type="range"这个属性来实现，通过min和mac这两个属性来调整最大最小所取的值

再通过span来显示具体的值，这个值来决定密码的长度

功能三：

给按钮添加监听事件，如果点击按钮，就开始随机生成密码，就是实现功能一中的操作

功能四：

 selectors.input.select()//选中密码显示框内容
 document.execCommand('copy')//将选中的文本复制到粘贴板

利用input中的select()方法，选中密码显示框的内容

再通过document.execCommand('copy') 将选中的文本复制到粘贴板

四、源代码

htnl

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>

<body>
    <div class="app">
        <div class="password">
            <input type="text">
            <span class="icon" data-js-selector="copy"></span>
        </div>

        <div class="limit">
            <form action="" class="limit-form">
                <label for="letter" data-js-selector="checkbox">
                    <input type="checkbox" class="letterInput" id="letter"> Uppercase<br>
                </label>
                <label for="num" data-js-selector="checkbox">
                    <input type="checkbox" class="numInput" id="num"> Numbers<br>
                </label>
                <label for="char" data-js-selector="checkbox">
                    <input type="checkbox" class="charInput" id="char"> Symbols
                </label>
            </form>
        </div>
        <div class="psLength">Password Length
            <input type="range" min="5" max="20" value="5" class="slider" data-js-selector="slider" />
            <span class="value">5</span>
        </div>

        <button class="btn" data-js-selector="button">Creat Password</button>
    </div>
    <script src="js.js"></script>
</body>

</html>

css

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?a77yya');
    src: url('fonts/icomoon.eot?a77yya#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?a77yya') format('truetype'),
        url('fonts/icomoon.woff?a77yya') format('woff'),
        url('fonts/icomoon.svg?a77yya#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
body {
    background-color: rgb(250, 255, 202);
}

.app {
    border-radius: 50px;
    width: 300px;
    height: 300px;
    background-color: rgb(175, 218, 236);
    margin: 200px auto;
}

.password {
    position: relative;
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

.password input {
    width: 80%;
    height: 40px;
    border-radius: 40px;
    padding-left: 30px;
}

.password .icon {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 35px;
    right: 30px;
    cursor:pointer
}
.icon:before {
    content: '';
    font-family: 'icomoon';
}

.limit {
    width: 100%;
    margin: 30px auto;
    margin-left: 70px;
}

.limit .limit-form {
    font-size: 16px;
}

.psLength {
    text-align: center;
}

.psLength input {
    width: 200px;
    border-radius: 40px;
}

.btn {
    transform: translateX(50%);
    width: 50%;
    height: 40px;
    background-color: pink;
    border-radius: 40px;

}

js

const inputStates = {
    letter: false,
    num: false,
    char: false
}
//记录要进行的操作
const selectors = {
    copy: 'copy',//复制操作
    checkbox: 'checkbox',//选中复选框
    slider: 'slider',//滑动滑块
    button: 'button',//点击提交按钮
    sliderValue: document.querySelector('.value'),//滑动滑块的值
    input: document.querySelector('.password input')//密码显示框
}


//添加监听事件
document.querySelector('.app').addEventListener('click', function (e) {
    switch (e.target.dataset.jsSelector) {
        case selectors.copy:
            selectors.input.select()
            document.execCommand('copy')
            break;
        case selectors.cheskbox:
            inputStates[e.target.id] = e.target.checked
            break;
        case selectors.slider:
            selectors.sliderValue.innerHTML = e.target.valueAsNumber
            break;
        case selectors.button:
            selectors.input.value = createPassword()//用密码显示框接收生成的密码
            break;
    }
})

//生成密码
function createPassword() {
    const length = selectors.sliderValue.innerHTML
    const letter = "abcdefghijklmnopqrstuvwxyz"
    const choice = {
        upperLetter: letter.toUpperCase(),
        num: '0123456789',
        char: '!@#$%&~'
    }
    //根据状态添加到同一个字符串中
    let arr = ''
    arr += letter
    arr += inputStates.letter ? choice.upperLetter : ''
    arr += inputStates.num ? choice.num : ''
    arr += inputStates.char ? choice.char : ''
    let arrs = ''//最终的密码字符串
    for (let i = 0; i < length; i++) {
        arrs += arr.charAt(Math.floor(Math.random() * arr.length))
    }
    return arrs//返回密码字符串
}