Javascript验证码的生成和验证，源代码

最新推荐文章于 2024-06-17 09:00:00 发布

qq_50482136

最新推荐文章于 2024-06-17 09:00:00 发布

阅读量474

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_50482136/article/details/126313949

版权

如果有幸被那位大神看见希望可以为我指出下面的问题，

我是一个前端白小白，刚开始学和记录自己感觉不错的小项目，各位大神有好的方法或者更好的写法可以指点一二，写不好的时候随便喷我想看一下我潜力到底有多大。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>随机验证码生成于校验</title>
        <style>
            #div1{
                width: 100px;
                height: 100px;
                background: #ccc;
                 align-items: center;
                 display: flex;
                 justify-content: center;
                 cursor: pointer;
            }
            #pp{
                color: red;
                font-size: 18px;
                
               
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <p id="pp"></p>
        </div>
        <input type="text" id="input1">
        <input type="button" value="验证" id="input">
        <script>
            window.onload=function(){ 
                //设置全局变量
                var code;
                //获取id
                var codeDiv = document.getElementById("pp");
                var codeinput=document.getElementById("input1");
                var codeValue = document.getElementById("input");
                var div2 = document.getElementById("div1");
                //调用函数并赋值给p标签
                codeDiv.innerHTML=randomCode();
                //获取随机数的函数
                
                function random(max,min){
                    return Math.floor(Math.random()*(max-min)+min);
                }
                
                function randomCode(){
                    code='';
                    //设置验证码长度
                    var codeLength = 4;
                    //设置验证码的范围
                    var creatCode=[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'];
                                      
                    for(var i=0;i<codeLength;i++){
                            //设置随机范围
                        var index = random(0,36);
                         code+=creatCode[index];
                            
                        }
                   return code;
                }
                //点击事件 对验证码对错判断
                codeValue.onclick=function(){
                    // 把输出框中的字符转换成大写字母
                    var dx = codeinput.value.toUpperCase();
                    if(dx===code){
                        //跳转页面地址
                        window.location.href='https://www.baidu.com';
                    }else{
                        alert("输入验证码不正确");
                       //把输入框清空
                       codeinput.value='';
                       //在刷新验证码
                        codeDiv.innerHTML=randomCode();
                        
                    }
                }
                
                div2.onclick=function(){
                    codeDiv.innerHTML=randomCode();
                }
               
            }
        </script>
    </body>
</html>

第一个问题：这个里面我有一个问还是不明白。

 function randomCode(){
                    code='';
                    //设置验证码长度
                    var codeLength = 4;
                    //设置验证码的范围
                    var creatCode=[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'];
                                      
                    for(var i=0;i<codeLength;i++){
                            //设置随机范围
                        var index = random(0,36);
                         code+=creatCode[index];
                            
                        }
                   return code;
                }

就是这上面这段代码中，那个return code;我一开始是打算用直接codeDiv.innerHTML= code,但是我这样写报错了我也不知道为啥，