【案例】简单的js验证码

来源：互联网发布：java的调用接口特点编辑：程序博客网时间：2024/06/10 22:53

这里写图片描述

【案例】简单的js验证码

<!doctype html><html><head>    <meta charset="utf-8">    <title></title>    <script src="js/code.js"></script>    <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></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>

code.js代码如下：

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();    }}

0 0