js 随机密码生成器

k, k • 2023-10-02 • JavaScript 
<!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>

 

版权声明：
作者：k, k
链接：http://kuyour.top/index.php/2023/10/02/js-%e9%9a%8f%e6%9c%ba%e5%af%86%e7%a0%81%e7%94%9f%e6%88%90%e5%99%a8/
来源：KuKey
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
打赏
海报
js 随机密码生成器
<!DOCTYPE html> <html lang="en"> <style> *{ margin: 0; padding: 0; } </s……
<<上一篇
下一篇>>