一、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——验证码的更多相关文章

  1. .net点选验证码实现思路分享

    哈哈好久没冒泡了,最进看见点选验证码有点意思,所以想自己写一个. 先上效果图 如果你被这个效果吸引了就请继续看下去. 贴代码前先说点思路: 1.要有一个汉字库,并按字形分类.(我在数据库里是安部首分类 ...

  2. 【探索】无形验证码 —— PoW 算力验证

    先来思考一个问题:如何写一个能消耗对方时间的程序? 消耗时间还不简单,休眠一下就可以了: Sleep(1000) 这确实消耗了时间,但并没有消耗 CPU.如果对方开了变速齿轮,这瞬间就能完成. 不过要 ...

  3. TODO：Laravel增加验证码

    TODO:Laravel增加验证码1. 先聊聊验证码是什么,有什么作用?验证码(CAPTCHA)是"Completely Automated Public Turing test to te ...

  4. PHP-解析验证码类--学习笔记

    1.开始 在 网上看到使用PHP写的ValidateCode生成验证码码类,感觉不错,特拿来分析学习一下. 2.类图 3.验证码类部分代码 3.1  定义变量 //随机因子 private $char ...

  5. 随手记_C#验证码

    前言 最近在网上偶然看见一个验证码,觉得很有意思,于是搜了下,是使用第三方实现的,先看效果: 总体来说效果还是可以的,官方提供的SDK也比较详细,可配置性很高.在这里在简单啰嗦几句使用方式: 使用步骤 ...

  6. WPF做12306验证码点击效果

    一.效果 和12306是一样的,运行一张图上点击多个位置,横线以上和左边框还有有边框位置不允许点击,点击按钮输出坐标集合,也就是12306登陆的时候,需要向后台传递的参数. 二.实现思路 1.获取验证 ...

  7. 零OCR基础6行代码实现C#验证码识别

    这两天因为工作需要,要到某个网站采集信息,一是要模拟登陆,二是要破解验证码,本想用第三方付费打码,但是想想网上免费的代码也挺多的,于是乎准备从网上撸点代码下来,谁知道,撸了好多个都不行,本人以前也没接 ...

  8. ASP.NET中画图形验证码

    context.Response.ContentType = "image/jpeg"; //生成随机的中文验证码 string yzm = "人口手大小多少上中下男女天 ...

  9. asp.net mvc 验证码

    效果图 验证码类 namespace QJW.VerifyCode { //用法: //public FileContentResult CreateValidate() //{ // Validat ...

  10. ecshop验证码

    <?php //仿制ecshop验证码(四位大写字母和数字.背景) //处理码值(四位大写字母和数字组成) //所有的可能的字符集合 $chars = 'ABCDEFGHIJKLMNOPQRST ...

随机推荐

  1. postman接口测试之复制多个接口或collections到某个子文件夹或collections下

    一.痛点 1.postman只支持复制一个请求,或者一个子文件夹,但是不支持复制多个请求,或者整个collections到某个子文件夹或者某个collections下. 2.网上查了好一会儿,没有一个 ...

  2. Dubbo的设计理念原来就藏在这三张图中

    Dubbo在众多的微服务框架中脱颖而出,占据RPC服务框架的半壁江山,非常具有普适性,熟练掌握 Dubbo的应用技巧后深刻理解其内部实现原理,让大家能更好的掌控工作,助力职场,特别能让大家在面试中脱颖 ...

  3. [USACO13DEC]牛奶调度Milk Scheduling

    原题链接https://www.lydsy.com/JudgeOnline/problem.php?id=4096 容易想到的一个测略就是,优先考虑结束时间小的牛.所以我们对所有牛按照结束时间排序.然 ...

  4. USB过压保护芯片，高输入电压充电器（OVP）

    PW2606B是一种前端过电压和过电流保护装置.它实现了广泛的输入电压范围从2.5VDC到40VDC.过电压阈值可在外部或外部编程设置为内部默认设置.集成功率路径nFET开关的低电阻确保了更好的性能电 ...

  5. Property or method "previewUrl" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components,

    Property or method "previewUrl" is not defined on the instance but referenced during rende ...

  6. 加密填补 填充 pad padding

    RFC 1423 - Privacy Enhancement for Internet Electronic Mail: Part III: Algorithms, Modes, and Identi ...

  7. 一个基于protocol buffer的RPC实现

    Protocol Buffer仅仅是提供了一套序列化和反序列化结构数据的机制,本身不具有RPC功能,但是可以基于其实现一套RPC框架. Services protocol buffer的Service ...

  8. http 和 https 有何区别？如何灵活使用？

    http是HTTP协议运行在TCP之上.所有传输的内容都是明文,客户端和服务器端都无法验证对方的身份. https是HTTP运行在SSL/TLS之上,SSL/TLS运行在TCP之上.所有传输的内容都经 ...

  9. JAD 反编译

    自动拆装箱 对于基本类型和包装类型之间的转换,通过xxxValue()和valueOf()两个方法完成自动拆装箱,使用jad进行反编译可以看到该过程: public class Demo { publ ...

  10. 在IDEA中用三个jar包链接MongoDB数据库——实现增删改查

    安装Robo 3T连接MongoDB数据库教程:https://blog.csdn.net/baidu_39298625/article/details/98845789 使用Robo 3T操作Mon ...