HTML——验证码

一、HTML5的验证码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>验证码</title>

<style type="text/css">

    #canvas{

        cursor:pointer;

    }

</style>

</head>

<body>

    <canvas id="canvas" width="150px" height="50px"></canvas>

<script>

        //生成随机数

    function randomNum(min,max){

        return Math.floor(Math.random()*(max-min)+min);

    }

        //生成随机颜色RGB分量

    function randomColor(min,max){

        var _r = randomNum(min,max);

        var _g = randomNum(min,max);

        var _b = randomNum(min,max);

        return "rgb("+_r+","+_g+","+_b+")";

    }

    //先阻止画布默认点击发生的行为再执行drawPic()方法

    document.getElementById("canvas").onclick = function(e){

        e.preventDefault();

        drawPic();

    };

    function drawPic(){

        //获取到元素canvas

        var $canvas = document.getElementById("canvas");

        var _str = "0123456789";//设置随机数库

        var _picTxt = "";//随机数

        var _num = 4;//4个随机数字

        var _width = $canvas.width;

        var _height = $canvas.height;

        var ctx = $canvas.getContext("2d");//获取 context 对象

        ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐

        ctx.fillStyle = randomColor(180,240);//填充画布颜色

        ctx.fillRect(0,0,_width,_height);//填充矩形--画画

        for(var i=0; i<_num; i++){

            var x = (_width-10)/_num*i+10;

            var y = randomNum(_height/2,_height);

            var deg = randomNum(-45,45);

            var txt = _str[randomNum(0,_str.length)];

            _picTxt += txt;//获取一个随机数

            ctx.fillStyle = randomColor(10,100);//填充随机颜色

            ctx.font = randomNum(16,40)+"px SimHei";//设置随机数大小，字体为SimHei

            ctx.translate(x,y);//将当前xy坐标作为原始坐标

            ctx.rotate(deg*Math.PI/180);//旋转随机角度

            ctx.fillText(txt, 0,0);//绘制填色的文本

            ctx.rotate(-deg*Math.PI/180);

            ctx.translate(-x,-y);

        }

        for(var i=0; i<_num; i++){

            //定义笔触颜色

            ctx.strokeStyle = randomColor(90,180);

            ctx.beginPath();

            //随机划线--4条路径

            ctx.moveTo(randomNum(0,_width), randomNum(0,_height));

            ctx.lineTo(randomNum(0,_width), randomNum(0,_height));

            ctx.stroke();

        }

        for(var i=0; i<_num*10; i++){

            ctx.fillStyle = randomColor(0,255);

            ctx.beginPath();

            //随机画原，填充颜色

            ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);

            ctx.fill();

        }

        return _picTxt;//返回随机数字符串

    }

    drawPic();

</script>

</body>

</html>

二、JS的验证码

//页面加载时，生成随机验证码

    window.onload=function(){

     createCode(4);

    }

    //生成验证码的方法

    function createCode(length) {

        var code = "";

        var codeLength = parseInt(length); //验证码的长度

        var checkCode = document.getElementById("checkCode");

        ////所有候选组成验证码的字符，当然也可以用中文的

        var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,

        'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',

        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');

        //循环组成验证码的字符串

        for (var i = 0; i < codeLength; i++)

        {

            //获取随机验证码下标

            var charNum = Math.floor(Math.random() * 62);

            //组合成指定字符验证码

            code += codeChars[charNum];

        }

        if (checkCode)

        {

            //为验证码区域添加样式名

            checkCode.className = "code";

            //将生成验证码赋值到显示区

            checkCode.innerHTML = code;

        }

    }

    //检查验证码是否正确

    function validateCode()

    {

        //获取显示区生成的验证码

        var checkCode = document.getElementById("checkCode").innerHTML;

        //获取输入的验证码

        var inputCode = document.getElementById("inputCode").value;

        //console.log(checkCode);

        //console.log(inputCode);

        if (inputCode.length <= 0)

        {

            alert("请输入验证码！");

        }

        else if (inputCode.toUpperCase() != checkCode.toUpperCase())

        {

            alert("验证码输入有误！");

            createCode(4);

        }

        else

        {

            alert("验证码正确！");

        }

    }

HTML——验证码的更多相关文章

.net点选验证码实现思路分享
哈哈好久没冒泡了,最进看见点选验证码有点意思,所以想自己写一个. 先上效果图如果你被这个效果吸引了就请继续看下去. 贴代码前先说点思路: 1.要有一个汉字库,并按字形分类.(我在数据库里是安部首分类 ...
【探索】无形验证码 —— PoW 算力验证
先来思考一个问题:如何写一个能消耗对方时间的程序? 消耗时间还不简单,休眠一下就可以了: Sleep(1000) 这确实消耗了时间,但并没有消耗 CPU.如果对方开了变速齿轮,这瞬间就能完成. 不过要 ...
TODO：Laravel增加验证码
TODO:Laravel增加验证码1. 先聊聊验证码是什么,有什么作用?验证码(CAPTCHA)是"Completely Automated Public Turing test to te ...
PHP-解析验证码类--学习笔记
1.开始在网上看到使用PHP写的ValidateCode生成验证码码类,感觉不错,特拿来分析学习一下. 2.类图 3.验证码类部分代码 3.1 定义变量 //随机因子 private $char ...
随手记_C#验证码
前言最近在网上偶然看见一个验证码,觉得很有意思,于是搜了下,是使用第三方实现的,先看效果: 总体来说效果还是可以的,官方提供的SDK也比较详细,可配置性很高.在这里在简单啰嗦几句使用方式: 使用步骤 ...
WPF做12306验证码点击效果
一.效果和12306是一样的,运行一张图上点击多个位置,横线以上和左边框还有有边框位置不允许点击,点击按钮输出坐标集合,也就是12306登陆的时候,需要向后台传递的参数. 二.实现思路 1.获取验证 ...
零OCR基础6行代码实现C#验证码识别
这两天因为工作需要,要到某个网站采集信息,一是要模拟登陆,二是要破解验证码,本想用第三方付费打码,但是想想网上免费的代码也挺多的,于是乎准备从网上撸点代码下来,谁知道,撸了好多个都不行,本人以前也没接 ...
ASP.NET中画图形验证码
context.Response.ContentType = "image/jpeg"; //生成随机的中文验证码 string yzm = "人口手大小多少上中下男女天 ...
asp.net mvc 验证码
效果图验证码类 namespace QJW.VerifyCode { //用法: //public FileContentResult CreateValidate() //{ // Validat ...
ecshop验证码
<?php //仿制ecshop验证码(四位大写字母和数字.背景) //处理码值(四位大写字母和数字组成) //所有的可能的字符集合 $chars = 'ABCDEFGHIJKLMNOPQRST ...

随机推荐

攻防世界 - Web（一）
baby_web: 1.根据题目提示,初始页面即为index,将1.php改为index.php,发现依然跳转成1.php,尝试修改抓包,出现如下回显, 2.在header中获取flag, flag: ...
使用memory_profiler异常
在使用memory_profiler模块0.55.0版本执行命令诊断程序内存用量时,遇到下面错误: C:\Users\Chen\Desktop\python_doc\第四模块课件>python ...
REUSE_ALV_FIELDCATALOG_MERGE函数
今天使用REUSE_ALV_FIELDCATALOG_MERGE函数,就是获取不到fieldcat, 搞了半天才发现,原来参数要全部大写才行!!小写字符就是获取不到,唉,悲哀...
迈凯伦765LT/600LT/720S/650S/570S维修手册电路图Mclaren车间手册接线图
全套迈凯伦维修手册电路图Mclaren车间手册线路图:语言:English,German,French,Spanish,Chinese,Japanese.McLaren迈凯伦新GT维修手册电路图零配件 ...
消息队列之kafka
消息队列之activeMQ 消息队列之RabbitMQ 1.kafka介绍 kafka是由scala语言开发的一个多分区,多副本的并且居于zookeeper协调的分布式的发布-订阅消息系统.具有高吞吐 ...
docker 运行时常见错误
docker 运行时常见错误 (1) Cannot connect to the Docker daemon at unix:///var/run/docker.sock. [root@localho ...
微信小程序发送模板消息的功能实现
背景 - 小程序开发的过程中,绝大多数会满足微信支付 - 那么,作为友好交互的体现,自然就会考虑到支付后的消息通知咯 - 所以,我的小程序项目也要求完成这个效果,so.分享一下自己的实现步骤,以方便道 ...
如何封装Promise对象？
最近看到了一个有趣的Promise的方法,这里记录下来 <script> class MyPromise { constructor(executor) { // 初始化state赋值为p ...
一次I/O问题引发的P0重大故障[改版重推] 原创二马读书二马读书 8月16日这是前段时间发的一篇文章，很多读者反馈，文章没有揭示故障发生的详细
一次I/O问题引发的P0重大故障[改版重推] 原创二马读书二马读书 8月16日这是前段时间发的一篇文章,很多读者反馈,文章没有揭示故障发生的详细
MFA
什么是 MFA?_启用和解绑MFA_账号常见问题_账号管理-阿里云 https://help.aliyun.com/knowledge_detail/37215.html

HTML——验证码

HTML——验证码的更多相关文章

随机推荐

热门专题