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 ...
随机推荐
- firewalld原理和基础命令
firewalld防火墙 Firewalld是什么? Firewalld提供了支持网络.防火墙定义网络看见以及接口安全等级的动态防火墙管理工具
- 使用call、apply、bind继承及三者区别
js里的继承方法有很多,比如:使用原型链的组合继承.es6的Class.寄生继承以及使用call.apply.bind继承.再说继承之前,我们先简单了解下它们的区别. 一.区别: 同:三者都是改变函数 ...
- Ribbon负载均衡服务调用
1.在听周阳老师讲解时,使用Ribbon核心组件IRule时是这样用的: ribbon版本 : 自定义配置类不能放在@ComponentScan所扫描的当前包下以及子包下,项目结构如下 MySelfR ...
- commons-lang3相关类实例
一.ArrayUtils //1.判断两个数组长度是否相等 ArrayUtils.isSameLength(new int[] {1,2,3,4}, new int[] {1,2,3,4});//tr ...
- linux编译模块，包含了头文件却还是报undifind警告
在编写一个自己写的gadget驱动的时候遇到一个这样的问题,编译的时候报了个警告:WARNING: "usb_composite_register" [-/my_zero.ko] ...
- 用CSS制做一个三角形！
用CSS制做一个三角形! <style> .outer { width: 0; height: 0; border-left: 10px solid transparent; border ...
- echarts图表X轴文字过长解决解决方案：根据文字长度自动旋转
Echarts 标签中文本内容太长的时候怎么办 ? 关于这个问题搜索一下,有很多解决方案.无非就是 省略(间隔显示).旋转文字方向.竖排展示 前面两种解决方案,就是echarts暴露的: { ax ...
- 一文带你看遍 JDK9~14 的重要新特性！
Java9 发布于 2017 年 9 月 21 日 .作为 Java8 之后 3 年半才发布的新版本,Java 9 带 来了很多重大的变化其中最重要的改动是 Java 平台模块系统的引入,其他还有诸如 ...
- P5686 和积和
写在前面 数学题接触的少,卡了半下午,愣是没想到直接往前缀和上考虑,按元素强推莽了半下午 Description 直接跳转到题目去啊 Solution 记 \(A,B\) 的前缀和序列分别为 \(sA ...
- Python骚操作从列表推导和生成器表达式开始
序列 序列是指一组数据,按存放类型分为容器序列与扁平序列,按能否被修改分为不可变序列与可变序列. 容器序列与扁平序列 容器序列存放的是对象的引用,包括list.tuple.collections.de ...