JavaScript实现简单验证码

最新推荐文章于 2022-06-17 20:00:32 发布

吕海青

最新推荐文章于 2022-06-17 20:00:32 发布

阅读量832

点赞数 1

分类专栏：前端文章标签： javascript css3 html5 html

本文链接：https://blog.csdn.net/qq_44659826/article/details/107976787

版权

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

JavaScript实现简单验证码

验证流程图

HTML部分


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .code {
        font-family: Arial;
        font-style: italic;
        color: blue;
        font-size: 26px;
        border: 0;
        padding: 0.2px 1.2px;
        letter-spacing: 4px;
        font-weight: bolder;
        float: left;
        cursor: pointer;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        vertical-align: middle;
        background-color: #d8b7e3;
    }

    span {
        text-decoration: none;
        font-size: 12px;
        color: #288bc4;
        padding-left: 10px;
        /* color: #4c9b7675; */
    }

    span:hover {
        text-decoration: underline;
        cursor: pointer;
        /* color: rgb(rgb(221, 84, 84), green, blue); */
        /* color: rgb(rgb(160, 207, 209), green, blue); */
    }
</style>

<body>
    <div>
        <table border="0" cellspacing="5" cellpadding="5">
            <tr>
                <td>
                    <div id="checkCode" class="code" onclick="createCode(4)">543</div>
                </td>
                <td> <span onclick="createCode(4)">看不清换一张</span></td>
            </tr>
            <tr>
                <td>验证码：</td>
                <td><input type="text" id="inputCode" style="float:left;" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" onclick="validateCode()" value="确定" /></td>
            </tr>
        </table>
    </div>

JavaScript部分

 window.onload = function () {
            createCode(4);
        }


        // 创建验证码
        function createCode(len) {
            // 
            var code = '';
            var codeLength = parseInt(len); //验证码的长度
            var checkCode = document.getElementById('checkCode'); //获取画布
            // 设置验证码
            var codeArray = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'l', 'k', 'j', 'h', 'g', 'f', 'd', 's', 'a', 'p', 'o', 'i', 'u', 'y', 't', 'r', 'r', 'e', 'w', 'q', "Z", 'X', 'C', "V", "B", "N", "M", "A", "S", "D", "F", "G", "H", "J", "L", "K", "P", "O", "I", "U", "Y", "T", "R", "E", "W", "Q")

            //设置验证码颜色
            // var num= Math.floor(Math.random() * 8)
            var color = '#';
            var bgcolor = '#';
            var fontcolor = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f');

            // 循环数组，随机获取
            for (var i = 0; i < codeLength; i++) {
                //获取数组下标
                var charNum = Math.floor(Math.random() * 62);
                // 存储数组
                code = code + codeArray[charNum];
            }
            if (checkCode && code.length == codeLength) {
                checkCode.innerHTML = code;
            }

            // 设置验证码颜色
            for (var i = 0; i < 6; i++) {
                var colorNum = Math.floor(Math.random() * 15);
                color += fontcolor[colorNum];
            }
            console.log(color)
            checkCode.style.color = color;
            
            // 设置画布背景颜色
            for (var i = 0; i < 6; i++) {
                var colorNum = Math.floor(Math.random() * 15);
                bgcolor += fontcolor[colorNum];
            }
            checkCode.style.backgroundColor = bgcolor;

        }

        // 检验验证码是否正确
        function validateCode() {
            // 获取画布的验证码
            var checkCode = document.getElementById("checkCode").innerHTML;
            // 获取用户输入的验证码，并且去掉空格
            var inputCode = document.getElementById('inputCode').value.trim();

            console.log(checkCode)
            console.log(inputCode)

            // 判断是否相等
            if (inputCode.length < 4) {
                alert('验证码长度为四位');
                createCode(4);
            } else if (checkCode.toLocaleLowerCase() != inputCode.toLocaleLowerCase()) {
                alert('输入验证码不正确！');
                createCode(4);
            } else {
                alert('正确')
            }
        }