隨機驗證碼

隨便啦_發表於2019-03-02
隨機
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>隨機驗證碼</title>
    <style>
        .char-code {
            width: 150px;
            height: 25px;
            line-height: 35px;
            font-size: 25px;
            text-align: center;
            /* border: 1px solid blanchedalmond; */
            margin: 20px auto;
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="char-code" id="charCode"></div>
    <input type="text" id="text">
    <input type="button" value=" 獲取驗證碼" id="btn">

    <script>
        // strCode 這個字串裡如果已經有這個字元了 就不拼接
        function createCode(len) {

            // 如果傳遞進來的值 不是數字型別或者是NaN 我們需要設定一個預設值
            // if (typeof len !== 'number' || isNaN(len)) {
            //     len = 4;
            // }
            var len = len || 4;
            var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
            var strCode = '';
            // 這個拼接的字串strCode 不夠len個字元 就會一直迴圈下去
            while (strCode.length < len) {
                // 生成一個 0~61的隨機索引
                var ind = Math.round(Math.random() * (str.length - 1));
                // 根據索引ind 獲取相應的字元
                var char = str[ind];
                // 如果strCode不存在這個字元 再進行拼接
                if (!strCode.includes(char)) {
                    // 進行字元拼接
                    // 將每一次得到的字元拼接起來
                    strCode += char;
                    // i++; //拼接一次就累加一次
                }


            }
            return strCode;
        }
        // console.log(createCode())
        var btn = document.getElementById('btn');
        var charCode = document.getElementById('charCode');
        var text = document.getElementById('text');
        btn.onclick = function () {
            charCode.innerHTML = createCode(text.value);
        }
    </script>
</body>

</html>
複製程式碼

相關文章