javaScript生成验证码

最新推荐文章于 2022-01-30 03:44:35 发布

一行tf

最新推荐文章于 2022-01-30 03:44:35 发布

阅读量363

点赞数 1

分类专栏： javaweb 文章标签： js javascript

本文链接：https://blog.csdn.net/tf617/article/details/116492487

版权

javaweb 专栏收录该内容

16 篇文章 8 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
        .code{
            background: lightblue;
            font-family: Arial;
            font-style: italic;
            color: blue;
            font-size: 30px;
            border:0;
            padding: 2px 3px;
            letter-spacing: 3px;
            font-weight: bolder;
            float: left;
            cursor: pointer;
            width: 150px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            vertical-align: middle;
        }
        a{
            text-decoration: none;
            font-size: 12px;
            color:#288bc4;
        }
        a:hover{
            text-decoration: underline;
        }
    </style>
    <script>
        //验证码
        var code;
        //产生验证码的方法
        function createCode() {
            code="";
            var codeLength=4;
            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++){
                // Math.random()会产生一个[0,1)的数
                // Math.random()*62会产生一个[0,62)的数，注意其中包含了小数
                // Math.floor(x) 方法返回小于等于x的最大整数。
                // Math.floor(Math.random()*62)会对由上面的语句产生的数值进行向下取整
                // 例如产生的数为5.5，则math.floor(5.5)=5
                // 最后把这个数赋值给变量i
                var charNum=Math.floor(Math.random()*62);
                code+=codeChars[charNum];
            }
           
            if(checkCode){
                checkCode.className="code";
                checkCode.innerHTML=code;
            }
        }
        //验证验证码的方法
        function validateCode(){
            //接受输入的验证码
            var inputCode=document.getElementById("inputCode").value;
            if(inputCode.length<=0){
                alert("请输入验证码！")
            }else if(inputCode.toUpperCase()!=code.toUpperCase()){
                alert("验证码有误！");
                createCode();
            }else{
                alert("验证码正确！");
            }
           
         }            
        
    </script>
</head>
<body onload="createCode()">
    <form id="form1" runat="server">
        <div>
            <table border="0" cellspacing="5" cellpadding="5">
                <tr>
                    <td></td>
                    <td>
                        <div class="code" id="checkCode" onclick="createCode()"></div>
                    </td>
                    <td>
                        <a a href="#" onclick="createCode()">看不清换一张</a>
                    </td>
                </tr>
                <tr>
                    <td>验证码：</td>
                    <td>
                        <!--输入验证码的框  -->
                        <input style="float: left;" type="text" id="inputCode"/>
                    </td>
                    <td>请输入验证码</td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td><input id="Button1" onclick="validateCode()" type="button" value="确定"></td>
                    <td></td>
                </tr>
            </table>
        </div>

    </form>
</body>
</html>