js中的验证码

最新推荐文章于 2023-12-21 10:39:51 发布

DOIT-HU

最新推荐文章于 2023-12-21 10:39:51 发布

阅读量533

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/InvisibleMouse/article/details/105095395

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

之前也写过一些不同方式的验证码，但是没有保存，之后也不知所踪了。于是就想写一篇关于验证码的文章，到最后用到的时候复制黏贴就OK了（嘿嘿，就是偷懒）。

最好是后端请求验证码，前端画出验证码，之后后端验证。验证可以前端先检查一下，但是后端一定要有验证。

在开始之前先向大家推荐一个有关jQuery的网站:jquery库（已经知道的就可以跳过(⌒_⌒;)）应该是完全免费的一个前端网站，很良心。

开始正题

在jquery库中您可以搜索“验证码”，您会惊喜的发现，有人已经帮你写好了常用的验证码功能（验证码直通车）。如果您只是需要一种或两种验证码的实现功能，到这里就可以结束了；您只需要下载这个网址中的验证码，通过更改代码来完成您自己的需求就可以了，修改他的代码也不是很难。

我的验证码

第一种

图片验证，简单来说是给出一张图片写出图片中的内容或者计算内容；这是最基础的一种验证码。

啥啥的，都是假的，会canvas就行了;不会就去现场学一下两分钟的事情。之后就发挥自己的想象力，创造就完事了（嘿嘿嘿）。

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码</title>
</head>
<body>
    <canvas id="verify" width="150" height="50"></canvas>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


    <script>
        
        var ctx = getCanvas("verify");
        
        var width = getCanvasWidth("verify");
        var height = getCanvasHeight("verify");

        function getCanvas(canvas_Id){
            return document.getElementById(canvas_Id).getContext("2d"); 
        }
        function getCanvasWidth(canvas_Id){
            return $("#" + canvas_Id).width();
        }
        function getCanvasHeight(canvas_Id){
            return $("#" + canvas_Id).height();
        }
        /**
         *  description：初始化画布
         *  canvas_Id：画布的ID
         *  bgColor：画布的背景颜色
         */
        function init_Canvas(canvas_Id,bgColor){
            ctx.fillStyle = bgColor;
            ctx.fillRect(0,0,width,height);
        }

        /**
         * description：产生min--max之间的整数
         * */
        function RandomNUM(min,max){
            return  parseInt(Math.random()*(max-min)+min);
        }


        function RandomColor(){
            var r = RandomNUM(0,255);
            var g = RandomNUM(0,255);
            var b = RandomNUM(0,255);
            return `rgb(${r},${g},${b})`;
        }
        /**
         * description：画干扰线
         * num：干扰线的根数
         * */
        function drawLine(num) {
            for(var i = 0; i < num; i++) {
                ctx.beginPath();
                ctx.moveTo(RandomNUM(0,width),RandomNUM(0,height));
                ctx.lineTo(RandomNUM(0,width),RandomNUM(0,height));
                ctx.strokeStyle = RandomColor();
                ctx.closePath();
                ctx.stroke();
            }
        }
        /**
         * description：产生随机字符
         * num：随机字符的个数
         * result：返回随机生成的字符串
         * */
        function RandomString(num){
            var pool="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";
            var result = "";
            for(var i=0;i<num;i++){
                var c=pool[RandomNUM(0,pool.length)];//随机的字
                result += c; 
                var fontSize=RandomNUM(18,40);//字体的大小
                var deg=RandomNUM(-30,30);//字体的旋转角度
                ctx.font=fontSize+'px Simhei';
                ctx.textBaseline="top";
                ctx.fillStyle="#FFF";
                ctx.save();
                ctx.translate(30*i+15,15);
                ctx.rotate(deg*Math.PI/180);
                ctx.fillText(c,0,0);
                ctx.restore();
            }
            return result;
        }
        init_Canvas("verify","#123");
        drawLine(5);
        RandomString(4);
    </script>
</body>
</html>

算术的那种就靠各位发挥吧。（斜眼笑）

第二种

滑动验证，简单来说是通过滑动滑块来完成验证。
啰嗦一下，ヾ(๑╹◡╹)ﾉ"，滑块的样式要是巴拉巴拉才能实现滑动，不会的话还是度娘一下吧
参考文章利用canvas实现滑动验证功能

DOIT-HU

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js中的验证码

前言之前也写过一些不同方式的验证码，但是没有保存，之后也不知所踪了。于是就想写一篇关于验证码的文章，到最后用到的时候复制黏贴就OK了（嘿嘿，就是偷懒）。之前写的验证码是配合着java后端与ajax来实现的；但是这次上网先查了一下有关验证码的文章，貌似直接在前端就可以完成验证码的实现验证功能。so，这次就尝试着纯前端的验证码。在开始之前先向大家推荐一个有关jQuery的网站:jquery库（...
复制链接

扫一扫