canvas + jquery 生成登录验证码

最新推荐文章于 2023-08-15 20:00:00 发布

前端小白想学理财

最新推荐文章于 2023-08-15 20:00:00 发布

阅读量255

点赞数

分类专栏：前端小白的笔记本文章标签： jquery html5 css

本文链接：https://blog.csdn.net/qq_45073669/article/details/120220711

版权

前端小白的笔记本专栏收录该内容

8 篇文章 0 订阅

订阅专栏

canvas + jquery 生成登录验证码

功能点

1. 随机生成六位验证码（包含字母数字区分大小写）
2. 点击刷新按钮可更新验证码
3. 点击提交按钮能将验证码表单中的值与随机生成的验证码进行比对进行提示并及时更新验证码

在这里插入图片描述

                                 以上是   图 1  效果图

在这里插入图片描述

                       图 2  当验证正确时 显示正确图标 并重新更新验证码

在这里插入图片描述

              图 3  当验证错误时 显示错误提示图标 并且给予 红色文字 提示用户

html代码

<!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> canvas 验证码</title>
    <link rel="stylesheet" href="demo.css">
</head>

<body>
    <div class="wrapper">
        <div class="inputBox">
            <input type="text" placeholder="请输入验证码">
            <span></span>
        </div>
        <!-- 错误提示 -->
        <p class="error">safdsad</p>
        <div class="canvasBox">
            <div class="imgBox">
                <!-- 画布 -->
                <canvas id="myCanvas" width="300" height="80"></canvas>
            </div>
            <!-- 刷新按钮 -->
            <input type="button" class="refresh">
        </div>
        <button class="submit">submit</button>
    </div>



    <script src="jquery-3.6.0.min.js"></script>
    <script src="demo.js"></script>
</body>

</html>

css代码

* {
    margin: 0;
    padding: 0;
}

.wrapper {
    margin: 30px;
    width: 345px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.inputBox {
    position: relative;
    box-sizing: border-box;
}

.inputBox input {
    display: inline-block;
    width: 300px;
    outline: none;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.inputBox span {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 32px;
    height: 32px;
    background: url('./img/zhengque.png');
    background-size: 100%;
    display: none;
}

.error {
    color: red;
    margin-top: 10px;
    display: none;
}

.canvasBox {
    position: relative;
    margin-top: 15px;
}

.canvasBox .imgBox {
    width: 300px;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.canvasBox .refresh {
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background: url('./img/shuaxin.png');
    background-size: 100%;
    /* margin-top: 16px; */
    border: 0;
    transform: translate(0, -50%);
    cursor: pointer;
}

.submit {
    padding: 10px 20px;
    border: 0;
    background-color: greenyellow;
    border-radius: 5px;
    margin-top: 20px;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
}

js 代码

// 调用一个canvas的方法 随机声场字符串 从大小英文字母及数字之间的选取 六个需要组成识别的验证码
// 填充
// 输入验证码 点击提交---》进行判断 正确/错误
// 65~90  97~122 用编码

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, ];
for (var i = 65; i < 122; i++) {
    if (i > 90 && i < 97) {
        continue;
    }
    arr.push(String.fromCharCode(i))
}
// value 是生成的验证码 下面作比较需要

var yzvalue;
function createCanvas() {
    // 选取要显示的字符
    var canvasStr = '';
    yzvalue = '';
    for (var i = 0; i < 6; i++) {
        var a = arr[Math.floor(Math.random() * arr.length)]
        canvasStr += a + ' ';
        yzvalue += a;
    }
    console.log(yzvalue)

    // 生成验证码区域
    var myCanvas = document.getElementById('myCanvas')
    var ctx = myCanvas.getContext('2d');
    var oImg = new Image();
    oImg.src = './img/yanzheng.png'
        // 当图片加载完之后将字符渲染进去
    oImg.onload = function() {
        var pattern = ctx.createPattern(oImg, 'repeat');
        ctx.fillStyle = pattern;
        ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
        ctx.textAlign = "center"
        ctx.fillStyle = "#ccc"
        ctx.font = '46px Roboto Slab';
        ctx.setTransform(1, -0.12, 0.3, 1, 0, 12)
        ctx.fillText(canvasStr, myCanvas.width / 2, 60)
    }
}
createCanvas();

// 点击提交按钮, 进行判断是否正确 给与什么提示
$('.submit').on('click', function() {
        showResult();
    })
    // 点击刷新按钮 刷新验证码
$('.refresh').on('click', function() {
        createCanvas();
    })
    // 进行判断是否正确 给相应的提示
function showResult() {
    var inputValue = $('.inputBox input').val();
    if (yzvalue == inputValue) {
        $('.inputBox span').css({
            display: "inline-block",
            background: "url('./img/zhengque.png')",
            backgroundSize: "100%"

        });
        $('.error').css("display", "none")
        createCanvas();

    } else {
        $('.inputBox span').css({
            display: "inline-block",
            background: "url('./img/woring.png')",
            backgroundSize: "100%"

        });
        $('.error').css("display", "block").html('验证码错误，请重新输入');
        createCanvas();

    }
}

前端小白想学理财

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas + jquery 生成登录验证码

canvas + jquery 生成登录验证码功能点1. 随机生成六位验证码（包含字母数字区分大小写）2. 点击刷新按钮可更新验证码3. 点击提交按钮能将验证码表单中的值与随机生成的验证码进行比对进行提示并及时更新验证码以上是图 1 效果图图 2 当验证正确时显示正确图标并重新更新验证码图 3 当验证错误时显
复制链接

扫一扫