HTML+CSS+JS生成随机验证码_html随机生成验证码

作者：思考机器3 | 2024-02-01 18:26:31

踩

html随机生成验证码

昨天在小破站看到一个前端生成随机验证码的视频，感觉很有意思，就跟着操作了一下，成功了。
后来自己又想给它加一个提交按钮，输入并判断验证码的正确性，也可以正常运行，但是我的代码好像还是存在一些bug：
1.canvas标签是绘图容器，自带属性使它是一个默认300*150的容器，缩小canvs容器时，里面的绘图也会变小，我没有找到合适的方法去调整它的大小。
2.对于输入框input，我使用了float浮动，为了使input输入框和canvas里面的验证码并排，但是被vscode警告了。
这次的实战练习也经历了很多坎坷，但是也收获很大。学习到了canvas标签的用法、JS全局变量和局部变量、以及有关context的一些属性和方法。
最后，希望路过的大佬，帮我看看bug，帮帮菜鸟。

实现代码：


<!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>
    <style type="text/css">
        label{
            float: left;
            line-height: 40px;
            vertical-align: middle;
        }
        #verification{
            padding:10px 2px;
            margin: 0;
            display: inline-block;
            float: left;
        }
        canvas{
            margin: 0;
            padding: 0;
            width: 120;
            height: 40;
            display: inline;
            float: left;
        }
        #login{
            clear: both;
        }
    </style>
</head>
<body>
    <div>
        <label for="verification">验证码</label><input type="text" id="verification">
        <canvas id="canvas"></canvas>
        <!-- canvas标签只是图形容器，必须用脚本来绘制图形，通常是JavaScript -->
        <button onclick="myFunction()">提交</button>
    </div>
    <script type="text/javascript">
        var result=""
        function YZM(selector,w,h){
            // var result="";
        // 随机生成数字
            function rn(min,max){
                return parseInt(Math.random()*(max-min)+min);
            }
        //生成随机颜色
            function rc(min,max){
                var r=rn(min,max);
                var g=rn(min,max);
                var b=rn(min,max);
                return `rgb(${r},${g},${b})`;
            }
        //填充背景颜色
            var w=w;
            var h=h;
            var canvas=document.querySelector(selector);
        //querySelector()方法返回文档中匹配指定CSS选择器的一个元素。
        //querySelector()方法仅仅返回匹配指定选择器的第一个元素。如果你想要返回所有的元素，请使用querySelectorAll()方法代替。
        // var ctx=canvas.getContext('2d');
        // getContext()方法返回一个用于在画布上绘图的环境
        //语法：canvas.getContext(contextID)
        //参数contextID指定了您想要在画布上绘制的类型。当前唯一合法的值是"2d",它指定了二维绘图，并且导致该方法返回一个环境对象，该对象导出一个二维绘图API。
        // ctx.fillRect(0,0,w,h);
            var ctx=canvas.getContext("2d");
            ctx.fillStyle=rc(180,230);
        //fillStyle属性设置或者返回用于填充的颜色、渐变哦或者模式。
            ctx.fillRect(0,0,w,h);
        //fillRect()方法绘制"已填色"的矩形，默认的填充颜色是黑色。
        //语法：context.fillRect(x,y,width,height);
 
        //随机字符串
            var pool="ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
        //取出随机数字
            for(var i=0;i<4;i++){
                var c=pool[rn(0,pool.length)];
            //随机字体大小
                var fs=rn(18,40);
            //随机字母数字的旋转角度
                var deg=rn(-30,30);
                ctx.font=fs+"px Simhei";
                ctx.textBaseline='top';
            //设置字体的填充颜色
                ctx.fillStyle=rc(80,150);
                ctx.save();
            //save()保存当前的绘图状态
                ctx.translate(30*i+15,15);
                ctx.rotate(deg*Math.PI/180);
                ctx.fillText(c,-10,-10);
            //context.fillText(text,x,y,maxWidth)----text是在画布上输出的文本，x和y是坐标，maxWidth是最大文本宽度
                ctx.restore();
            //restore()恢复之前保存的绘图状态
                result+=c;
                // console.log(c);
            }
 
        //随机生成干扰线
            for(var i=0;i<5;i++){
                ctx.beginPath();
        //beginPath()方法开始一条路径，或者重置当前的路径
                ctx.moveTo(rn(0,w),rn(0,h));
        //context.moveTo(x,y)----x是目标位置的x坐标，y是目标位置的y坐标
                ctx.lineTo(rn(0,w),rn(0,h));
        //lineTo()方法添加一个新点，然后创建从该点到画布中最后指定点的线条。(该方法并不会创建线条)
        //context.lineTo(x,y)-----x是目标位置的x坐标，y是目标位置的y坐标
                ctx.stokeStyle=rc(180,230);
        //strokeStyle属性设置或返回用于笔触的颜色、渐变或模式。
                ctx.closePath();
        //closePath()闭合路径
                ctx.stroke();
        //stroke()方法在画布上绘制确切的路径
            }
        
        //随机生成40个小的干扰圆点
            for(var i=0;i<40;i++){
                ctx.beginPath();
                ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);
        //arc()方法创建弧/曲线(用于创建圆或者部分圆)
                ctx.closePath();
                ctx.fillStyle=rc(150,200);
                ctx.fill();
            }
            return result;
            console.log(result);
        }
        let yzm=YZM("#canvas",120,40);
        console.log(yzm);
 
        //验证验证码是否正确
        function myFunction(){
            var mycode=document.getElementById("verification").value;
            if(mycode==result){
                alert("验证成功");
            }
            else{
                alert("验证失败，请重新输入");
            }
            console.log(mycode);
            }
    </script>
</body>
</html>

实现效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/54510