前端开发js-验证码案例 怎么做?

web前端开发职业技能|杭州西湖前端开发招聘|ui前端开发框架有哪些

html 代码

<!doctype html>
<meta charset=”utf-8″>
<head runat=”server”>
    <title>前端 开发环境:验证码</title>
    <style>
        .v_code {
            width: 600px;
            margin: 0 auto;
        }
        .v_code>input {
            width: 60px;
            height: 36px;
            margin-top: 10px;
        }
        .code_show {
            overflow: hidden;
        }
        .code_show span {
            display: block;
            float: left;
            margin-bottom: 10px;
        }
        .code_show a {
            display: block;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
        }
        .code {
            font-style: italic;
            background-color: #f5f5f5;
            color: blue;
            font-size: 30px;
            letter-spacing: 3px;
            font-weight: bolder;
            float: left;
            cursor: pointer;
            padding: 0 5px;
            text-align: center;
        }
        #inputCode {
            width: 100px;
            height: 30px;
        }
        a {
            text-decoration: none;
            font-size: 12px;
            color: #288bc4;
            cursor: pointer;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
    <script>
        window.onload = function () {
            checkCode();
        }
        var code;
        function createCode() {
            code = “”;
            var codeLength = 6; //验证码的长度
            var checkCode = document.getElementById(“checkCode”);
            var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
                ‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’, ‘g’, ‘h’, ‘i’, ‘j’, ‘k’, ‘l’, ‘m’, ‘n’, ‘o’, ‘p’, ‘q’, ‘r’, ‘s’, ‘t’, ‘u’, ‘v’, ‘w’, ‘x’, ‘y’, ‘z’,
                ‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’, ‘H’, ‘I’, ‘J’, ‘K’, ‘L’, ‘M’, ‘N’, ‘O’, ‘P’, ‘Q’, ‘R’, ‘S’, ‘T’, ‘U’, ‘V’, ‘W’, ‘X’, ‘Y’, ‘Z’); //所有候选组成验证码的字符,当然也可以用中文的
            for (var i = 0; i < codeLength; i++) {
                var charNum = Math.floor(Math.random() * 52);
                code += codeChars[charNum];
            }
            if (checkCode) {
                checkCode.className = “code”;
                checkCode.innerHTML = code;
            }
        }
        function validateCode() {
            var inputCode = document.getElementById(“inputCode”).value;
            var textShow = document.getElementById(“text_show”)
            if (inputCode.length <= 0) {
                textShow.innerHTML = “请输入验证码”;
                textShow.style.color = “red”;
            } else if (inputCode.toUpperCase() != code.toUpperCase()) {
                textShow.innerHTML = “您输入的验证码有误”;
                textShow.style.color = “red”;
                createCode();
            } else {
                textShow.innerHTML = “验证码正确”;
                textShow.style.color = “green”;
            }
        }
        function checkCode() {
            var btn = document.getElementById(“Button1”);
            btn.onclick = function () {
                validateCode();
            }
        }
    </script>
</head>
<body onload=”createCode()”>
    <div class=”v_code”>
        <div class=”code_show”>
            <span class=”code” id=”checkCode” onclick=”createCode()”></span>
            <a onclick=”createCode()”>看不清换一张</a>
        </div>
        <div class=”input_code”>
            <label for=”inputCode”>验证码:</label>
            <input type=”text” id=”inputCode” onblur=”validateCode();” />
            <span id=”text_show”></span>
        </div>
        <input id=”Button1″ type=”button” value=”确定” />
    </div>
</body>
</html>

对前端开发的框架|前端模块化开发|开发前端模板引擎

» 本文来自:前端开发者 » 《前端开发js-验证码案例 怎么做?》
» 本文链接地址:https://www.rokub.com/4510.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!