javaScirpt模拟后台编写的简单的动态验证码！

快来打我* 2022-09-03 01:16 295阅读 0赞

## 1.javaScirpt如何编写简单的动态验证码？ ##

> **首先呢**，由于我有这个想法的时候是在写一个简单的demo的时候萌生的一个小小的想法，能不能不借助后台在前台实现验证验证码里面的内容能否与输入框的内容匹配呢！  
> **其次**，由于我用的是canvas画布绘制的验证码框子，我查阅了相关的资料发现，获取canvas画布里面的内容是一件不太方便的事情，还是不如在**后台用canvas或者svg等第三方库在后台做数据验证来的方便，然后返回给前台将其渲染出来来的快**！  
> **最后**，没有办法，自己就硬着头皮写了下去，仅仅是实现了简单的效果而已.

## 2.写作思路： ##

> 1.  需要明白动态验证码是怎么样来的，有哪些需要注意的地方
> 2.  我选择采用canvas画布来完成的，可以弄一些干扰线来阻止用户的多次反复输入（当然其实是后端需要验证的事情）
> 3.  封装一个六位16进制的随机数来改变随机验证码的颜色
> 4.  封装一个每次给出不同排列组合的4位验证码，利用循环将26个字母和10个个位数字组合一下，每次取出4位作为验证码来使用
> 5.  利用canvas画布的路径线段作为干扰线，同时改变4位验证码的位置来达到效果
> 6.  配合点击事件，每次点击这个画布重新调用这个函数来刷新验证码

## 3.效果图如下： ##

![在这里插入图片描述][b140e724f14442e48f96ce64ab4b3426.gif_pic_center]

## 4.参考代码如下： ##

**css**

*{ 
        margin: 0;
        padding: 0;
    }
    .cavs{ 
        z-index:1;
        position: fixed;
        width:95%;
        margin-left: 20px;
        margin-right: 20px;
    }
    
    html,body{ 
        width: 100%;
        height: 100%;
        background: url("../image/bg1.jpg") no-repeat;
        background-size: 100% 100%;
    
    }
    
    
    
    .loginmain{ 
        background: rgba(0, 0, 0, 0.5);
        width: 540px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        padding: 100px 40px 40px 40px;
        box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
        z-index: 99999;
    }
    .login-title{ 
        color: #D3D7F7;
        height: 60px;
        font-size:20px;
        text-align: center;
        margin-top: -20px;
    }
    .login-con{ 
        height: 208px;
        position: absolute;
        left: 0;
        width: 80%;
        margin:0 10%;
    }
    .login-user{ 
        position: relative;
    }
    .icon{ 
        position: absolute;
        z-index: 1;
        left: 36px;
        top: 8px;
        opacity: 1;
    }
    .login-user #username01_span{ 
        color: red;
        position: absolute;
        right: 18px;
        top: 10px;
    }
    .login-con input{ 
        width: calc(100% - 130px);
        margin-top: -2px;
        background: rgba(57, 61, 82, 0);
        left: 0;
        padding: 10px 65px;
        border-top: 2px solid rgba(57, 61, 82, 0);
        border-bottom: 2px solid rgba(57, 61, 82, 0);
        border-right: none;
        border-left: none;
        outline: none;
        font-family: 'Gudea', sans-serif;
        box-shadow: none;
        color: #61BFFF !important;
    }
    .login-pwd, .login-yan{ 
        position: relative;
    }
    .login-yan canvas{ 
        width: 100px;
        height: 30px;
        position: absolute;
        right: 15px;
        top: 5px;
        background-color: white;
        border-radius: 5px;
        opacity: 0;
        /* border: 1px solid; */
    }
    /* .login-pwd .icon{ position: absolute; z-index: 1; left: 36px; top: 8px; opacity: .5; }*/
    .login-btn{ 
        width: 80%;
        margin: 0 auto;
        position: relative;
    }
    .login-btn input{ 
        border-radius: 3px;
        background: transparent;
        border: 2px solid #4FA1D9;
        color: #4FA1D9;
        text-transform: uppercase;
        font-size: 11px;
        cursor: pointer;
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
    
        margin: auto;
        width: 80%;
        transition-property: background,color;
        -webkit-transition-duration: .2s;
        transition-duration: .2s;
    }
    .login-btn input:hover{ 
        color: white !important;
        background: #4FA1D9;
        cursor: pointer;
        -webkit-transition-property: background,color;
        transition-property: background,color;
        -webkit-transition-duration: .2s;
        transition-duration: .2s;
    }

**html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
    <canvas class="cavs" width="1575" height="1337"></canvas>
    
    <div class="loginmain">
        <div class="login-title">
            <span>管理员登录</span>
        </div>
    
        <div class="login-con">
            <div class="login-user">
                <div class="icon">
                    <img src="image/user_icon_copy.png" alt="">
                </div>
                <input type="text" name="usernem" placeholder="用户名" autocomplete="off" value="" id="username01">
                <span id="username01_span"></span>
            </div>
            <div class="login-pwd">
                <div class="icon">
                    <img src="image/lock_icon_copy.png" alt="">
                </div>
                <input type="password" name="pwd" placeholder="密码" autocomplete="off" value="" id="userPwd01">
            </div>
            <div class="login-yan">
                <div class="icon">
                    <img src="image/key.png" alt="">
                </div>
                <input type="text" name="pwd" placeholder="验证码" autocomplete="off" value="" id="userCode"><canvas id="canvas"></canvas>
            </div>
            <div class="login-btn">
                <input type="button" value="登录" id="btn_login">
            </div>
        </div>
    
    </div>
    
    </body>
    </html>
    
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/ban.js"></script>
    <script src="./js/login.js"></script>

**javaScript**

$("#btn_login").click(function (){ 
        let uN=$("#username01").val();
        let uP=$("#userPwd01").val()
        login(uN,uP)
    })
    
    // 登录验证模块
    function login(username,userPwd){ 
        $.ajax({ 
            type:"POST",
            data:{ 
                username,
                userPwd
            },
            url:"http://localhost:12345/api/admin/login",
            success(res){ 
                let data=res.data;
                // console.log(res.data);
                if(data==1){ 
                    $("#username01_span").css("color","blue")
                    $("#username01_span").text("登录成功")
                    window.location.href="../management.html"
                }else if(data==0){ 
                    $("#username01_span").text("用户名或密码错误")
                }
            }
        })
    }
    
    function sportCode(){ 
        let str="0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
        let code='';
        for(let i=0;i<4;i++){ 
           code+=str.charAt(Math.floor(Math.random()*62))
        }
        return code;
    }
    // console.log(sportCode());
    
    
    // 封装一个随机颜色
    function getRandomBG(){ 
        return `rgb(${ getRandomFinger(255,0)},${ getRandomFinger(255,0)},${ getRandomFinger(255,0)})`
    }
    // console.log(getRandomBG());
    
    // 封装一个随机数范围
    function getRandomFinger(max,min){ //255-0
        return Math.round(Math.random()*(max-min)+min);
    }
    // console.log(getRandomFinger(255,252));
    
    // 绘制随机验证码
    function draw(){ 
        let canvas=document.getElementById("canvas");
        let ctx = canvas.getContext('2d');
    
        ctx.clearRect(0,0,canvas.width,canvas.height);//清屏
        ctx.font = '80px "微软雅黑"';
    	ctx.fillStyle = getRandomBG();
    	ctx.fillText(sportCode(), Math.random()*canvas.width/2, 80);
        
        // 干扰线4条
        for(let i=0;i<4;i++){ 
            ctx.beginPath();
            ctx.lineWidth=6;
            ctx.moveTo(Math.random()*canvas.width,Math.random()*canvas.height);
            ctx.lineTo(Math.random()*canvas.width,Math.random()*canvas.height);
            ctx.strokeStyle=getRandomBG();
            ctx.stroke();//画线
        }
    
    
    }
    draw()
    // console.log($("#canvas").val());
    
    $("#userCode").click(function(){ 
        $("canvas").css("opacity","1")
    })
    $("#canvas").click(function(){ 
        // console.log(123);
        draw()
    })
    
    let can01=document.getElementById("canvas");
    console.log(can01);
    // console.log(can01.toDataUrl());

## 5.小结： ##

这仅仅是个人的一个突发奇想写出来的，其实验证码用**nodeJs**利用第三方库可以高效率完成动态验证码的实现，作完数据验证后将其返回给前端，前端配合**ajax**的请求就可以完成一个真正的动态验证码的渲染！

[b140e724f14442e48f96ce64ab4b3426.gif_pic_center]: /images/20220829/003cff4cca774f9796d5416416b8136c.png