原生JS实现随机验证码,包含输入框验证

浅Q

已于 2022-07-28 17:08:33 修改

阅读量649

点赞数 2

文章标签： javascript 前端 html

于 2022-07-28 17:07:16 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52619560/article/details/126038142

版权

一. 代码展示

使用画布进行验证码的展示:

第一步: 获取元素

        /** @type {HTMLCanvasElement} */

        var can = document.getElementById('canvas');

第二步: 获取绘制对象

var ctx = can.getContext('2d');

第三步: 封装函数获取画布内容的位置

第四步: 画线

// 线的颜色
ctx.strokeStyle='red';
// 线宽
ctx.lineWidth = 10;
// 准备开始
ctx.beginPath();
// 先讲笔移动到50 50的位置落笔点
ctx.moveTo(50,50);
// 画到某个点
ctx.lineTo(100,100);
ctx.lineTo(20,100);
// 闭合
ctx.closePath();
// 开始划线
ctx.stroke();
// 填充颜色如果填充之前不设置颜色则默认填充黑色
ctx.fillStyle='yellow';
ctx.fill();

第五步: 给元素添加点击事件

代码展示:

<!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>Document</title>
</head>

<body>
    验证码: <input type="text" id="ipt"><button id="btn">确定</button>
    <canvas width="200" height="60" style="border: 1px solid #000;" id="can"></canvas>
    <button id="btns">看不清,换一张</button>
    <script>
        /** @type {HTMLCanvasElement} */
        //获取元素
        var can = document.getElementById('can');
        //获取绘制对象
        var ctx = can.getContext('2d');
        var str;
        function randoms() {
            var a = 30;
            str = '';
            for (let i = 0; i < 30; i++) {
                var n1 = Math.floor(Math.random() * 201);
                var n2 = Math.floor(Math.random() * 201);
                var n3 = Math.floor(Math.random() * 61);
                var n4 = Math.floor(Math.random() * 61);
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                ctx.strokeStyle = `rgb(${r},${g},${b})`;
                console.log(n1, n2, n3, n4)
                ctx.beginPath();
                ctx.moveTo(n1, n3);
                ctx.lineTo(n2, n4);
                ctx.stroke();
                ctx.closePath();
            }
            var word = Array.from(new Array(26), (ele, index) => {
                return String.fromCharCode(65 + index);
            })

            for (let i = 0; i < 4; i++) {
                var wordnum = Math.floor(Math.random() * 26);
                r = Math.floor(Math.random() * 256);
                g = Math.floor(Math.random() * 256);
                b = Math.floor(Math.random() * 256);
                ctx.fillStyle = `rgba(${r},${g},${b},.6)`;
                ctx.font = 'bold 50px 楷体'
                ctx.fillText(word[wordnum], a, 50, 40);
                a += 40;
                str += word[wordnum];
            }
        }
        randoms();
        
        btns.onclick = function(){
            ctx.clearRect(0,0,200,60);
            randoms();
        }     
        btn.onclick = function(){
            if(ipt.value===str){
                alert('验证码输入正确');
                ipt.value='';
                ctx.clearRect(0,0,200,60);
                randoms();
                console.log(str);
            }else{
                alert('验证码输入错误,请重新输入');
                ipt.value='';
                ctx.clearRect(0,0,200,60);
                randoms();
            }
        }


    </script>
</body>

</html>