50 天学习 50 个项目 - HTMLCSS and JavaScript

day31-Password Generator（密码生成器）

效果

在这里插入图片描述

index.html

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

<head>
    <meta charset="UTF-8" />
    <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.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 密码生成器容器 -->
    <div class="container">
        <h2>生成密码</h2>
        <!-- 结果 -->
        <div class="result-container">
            <span id="result"></span>
            <!-- 复制 -->
            <button class="btn" id="clipboard">
                <i class="far fa-clipboard"></i>
            </button>
        </div>
        <!-- 设置 -->
        <div class="settings">
            <div class="setting">
                <label>密码长度</label>
                <input type="number" id="length" min="8" max="20" value="8">
            </div>
            <div class="setting">
                <label>包含大写字母</label>
                <input type="checkbox" id="uppercase" checked>
            </div>
            <div class="setting">
                <label>包含小写字母</label>
                <input type="checkbox" id="lowercase" checked>
            </div>
            <div class="setting">
                <label>包含数字</label>
                <input type="checkbox" id="numbers" checked>
            </div>
            <div class="setting">
                <label>包含特殊符号</label>
                <input type="checkbox" id="symbols" checked>
            </div>
        </div>
        <!-- 点击生成密码 -->
        <button class="btn btn-large" id="generate">
            点击生成密码
        </button>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-color: #84d7fd;
    color: #fff;
    font-family: 'Muli', sans-serif;
    /* 竖直居中排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    padding: 10px;
    margin: 0;
}

/* 标题 */
h2 {
    margin: 10px 0 20px;
    text-align: center;
}

/* 密码生成器容器 */
.container {
    background-color: #4992ff;
    box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
    padding: 20px;
    width: 350px;
    max-width: 100%;
}

/* 结果 */
.result-container {
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 12px 10px;
    height: 50px;
    width: 100%;
}

.result-container #result {
    /* 允许在单词内部断开换行，以便适应容器宽度。 */
    word-wrap: break-word;
    max-width: calc(100% - 40px);
    /* 当内容超出容器高度时，显示垂直滚动条，以便用户可以滚动查看超出范围的内容。 */
    overflow-y: scroll;
    height: 100%;
}

/* 动条的宽度将等于根元素的字体大小的1倍。 */
#result::-webkit-scrollbar {
    width: 1rem;
}

/* 复制按钮 */
.result-container .btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
    font-size: 20px;
}

.btn {
    border: none;
    background-color: #1f58af;
    color: #fff;
    font-size: 16px;
    padding: 8px 12px;
    cursor: pointer;
}

/* 点击生成密码 */
.btn-large {
    display: block;
    width: 100%;
}

/* 设置类型的样式 */
.setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
}

script.js

// 重点 flex Math  filter Object.keys() Object.values()
// 1.获取元素节点
const resultEl = document.getElementById('result')//结果
const lengthEl = document.getElementById('length')//长度
const uppercaseEl = document.getElementById('uppercase')//大写字母
const lowercaseEl = document.getElementById('lowercase')//小写字母
const numbersEl = document.getElementById('numbers')//数字
const symbolsEl = document.getElementById('symbols')//特殊符号
const generateEl = document.getElementById('generate')//生成按钮
const clipboardEl = document.getElementById('clipboard')//复制
// 随机生成器  
const randomFunc = {
    lower: getRandomLower,
    upper: getRandomUpper,
    number: getRandomNumber,
    symbol: getRandomSymbol
}
// 点击复制
clipboardEl.addEventListener('click', () => {
    // 创建文本域暂时存储密码
    const textarea = document.createElement('textarea')
    const password = resultEl.innerText
    // 没有密码->结束
    if (!password) { return }

    textarea.value = password
    document.body.appendChild(textarea)
    // 这一行将选中（高亮显示）textarea元素中的文本。这是为了在执行剪贴板复制操作时，确保复制的是选中的文本内容。
    textarea.select()
    // 将选中的文本复制到剪贴板。
    document.execCommand('copy')
    textarea.remove()
    // 因为复制操作完成后，不再需要该元素。
    alert('密码复制成功')
})

// 点击生成密码
generateEl.addEventListener('click', () => {
    // +将字符串转为数字
    const length = +lengthEl.value
    // 是否包含
    const hasLower = lowercaseEl.checked
    const hasUpper = uppercaseEl.checked
    const hasNumber = numbersEl.checked
    const hasSymbol = symbolsEl.checked
    // 生成文本并显示
    resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length)
})
// 函数：生成密码
function generatePassword(lower, upper, number, symbol, length) {
    // 去除原来的密码
    let generatedPassword = ''
    // 类型
    const typesCount = lower + upper + number + symbol
    // console.log(typesCount);
    // 对象数组 过滤出选中的
    const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0])
    // console.log(typesArr);

    // 一个条件都未选，结束
    if (typesCount === 0) {
        return ''
    }
    // 几种类型循环 i += typesCount
    for (let i = 0; i < length; i += typesCount) {
        typesArr.forEach(type => {
            // 获取每一个item的key的第一个 用于接下来的randomFunc的方法调用
            const funcName = Object.keys(type)[0]
            generatedPassword += randomFunc[funcName]()
        })
    }
    // 最终密码
    const finalPassword = generatedPassword.slice(0, length)

    return finalPassword
}

// 小写字母
function getRandomLower() {
    // 一个范围在 97（对应小写字母 'a' 的 ASCII 码值）到 122（对应小写字母 'z' 的 ASCII 码值）之间的整数。
    // 计算得到的 ASCII 码值作为参数传递给它，从而得到一个随机小写字母的字符串。
    return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
}
// 大写字母
function getRandomUpper() {
    return String.fromCharCode(Math.floor(Math.random() * 26) + 65)
}
// 数字
function getRandomNumber() {
    return String.fromCharCode(Math.floor(Math.random() * 10) + 48)
}
// 特殊符号
function getRandomSymbol() {
    const symbols = '!@#$%^&*(){}[]=<>/,.'
    return symbols[Math.floor(Math.random() * symbols.length)]
}