一、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. 记忆中的像素块褪色了吗？用开源的体素编辑器重新做个 3D 的吧！

    本文适合对图形表现有兴趣的美术或者开发人员 本文作者:HelloGitHub-Joey 早期的的显示设备像素颗粒较大,使得显示内容的颗粒感严重,像是由一堆方块组成的.比较好的例子就是 GBA 上的游戏 ...

  2. mysql 1449 ： The user specified as a definer ('usertest'@'%') does not exist 解决方法 (grant 授予权限)

    从服务器上迁移数据库到本地localhost 执行  函数  时报错, mysql 1449 : The user specified as a definer ('usertest'@'%') do ...

  3. Kubernetes集群管理工具kubectl命令技巧大全

    一. kubectl概述 Kubectl是用于控制Kubernetes集群的命令行工具,通过kubectl能够对集群本身进行管理,并能够在集群上进行容器化应用的安装部署. kubectl命令的语法如下 ...

  4. 华为路由配置IPSec

    用该方法配置后用抓包工具抓取的就看不到两个通讯点的IP,而显示的是加密点的IP. 原文:https://www.cnblogs.com/yangyang1988/p/11559819.html

  5. 解决Linux下mysql区分大小写的问题

    1.查看lower_case_table_names的值,0代表区分大小写,1代表不区分大小写. 通过命令:SHOW VARIABLES LIKE 'lower%'; 1. 解决方法 以root用户登 ...

  6. Ubuntu14.04系统安装

    1. 使用U盘或光盘进行引导进入系统安装向导. 2. 安装类型选择,选择中文(简体).然后点安装ubuntu. 3. 安装ubuntu电脑必须接入外网(外网的方式有自动获取或手动编辑IP地址). 网络 ...

  7. 提供个HDFS的目录的路径,对该目录进行创建和删除操作。创建目录时,如果目录 文件所在目录不存在则自动创建相应目录;删除目录时,由用户指定当该目录不为空时是否还删 除该目录

    import java.io.IOException; import java.util.Scanner; import org.apache.hadoop.fs.*; public class G_ ...

  8. 轻型目录访问协议 ldap 公司内部网站的登录 单点登录

    https://zh.wikipedia.org/wiki/轻型目录访问协议 轻型目录访问协议(英文:Lightweight Directory Access Protocol,缩写:LDAP,/ˈɛ ...

  9. Pulsar Pub/Sub Messaging

    The Apache Software Foundation Announces Apache Pulsar as a Top-Level Project : The Apache Software ...

  10. 【c++小知识】static用法浅析

    一.前言 C++的关键字static分两种用法,在面向过程程序设计(c语言中的普通变量和函数)中的使用和在面向对象程序设计(c++中的类)中的使用 二.面向过程程序设计中的static(静态变量.静态 ...