一、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. kubernets之从应用访问pod元数据以及其他资源

    一  downwardAPI的应用 1.1  前面我们介绍了如何通过configmap以及secret将配置传入到pod的容器中,但是传递的这些都是预先能够安排和只晓得,对于那些只有当pod创建起来之 ...

  2. leetcode230. 二叉搜索树中第K小的元素

    题目链接: https://leetcode-cn.com/problems/kth-smallest-element-in-a-bst/ 题目: 给定一个二叉搜索树,编写一个函数 kthSmalle ...

  3. Xctf攻防世界—crypto—Normal_RSA

    下载压缩包后打开,看到两个文件flag.enc和pubkey.pem,根据文件名我们知道应该是密文及公钥 这里我们使用一款工具进行解密 工具链接:https://github.com/3summer/ ...

  4. MyBatis初级实战之五：一对一关联查询

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  5. 微信登录4-开发回调URL

    一.准备 1.引入pom依赖 在要使用HttpClient的项目中加入依赖 <!--httpclient--> <dependency> <groupId>org. ...

  6. FLask的偏函数应用

    偏函数 实际上,偏函数主要辅助原函数,作用其实和原函数差不多,不同的是,我们要多次调用原函数的时候,有些参数,我们需要多次手动的去提供值.而偏函数便可简化这些操作,减少函数调用,主要是将一个或多个参数 ...

  7. Mybatis【15】-- Mybatis一对一多表关联查询

    注:代码已托管在GitHub上,地址是:https://github.com/Damaer/Mybatis-Learning ,项目是mybatis-11-one2one,需要自取,需要配置maven ...

  8. Docker镜像仓库Harbor安装

    export VERSION=18.06 && curl -fsSL http://rainbond-pkg.oss-cn-shanghai.aliyuncs.com/releases ...

  9. 虚拟化kvm的搭建

            虚拟化, 是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机 ,在一台计算机上同时运行多个逻辑计算机,每台逻辑计算机可运行不同的操作系统,并且应用程序都可以在相互独立的空间内运行而互不 ...

  10. (转)iOS工具--CocoaPods 安装使用总结

    本文转载自:CocoaPods 安装使用总结(最新) 一.前言 关于什么是CocoaPods,使用CocoaPods的好处等问题本文不做说明,本文只是CocoaPods的安装和使用教程.根据此教程可以 ...