前言
之前也写过一些不同方式的验证码,但是没有保存,之后也不知所踪了。于是就想写一篇关于验证码的文章,到最后用到的时候复制黏贴就OK了(嘿嘿,就是偷懒)。
最好是后端请求验证码,前端画出验证码,之后后端验证。验证可以前端先检查一下,但是后端一定要有验证。
在开始之前先向大家推荐一个有关jQuery的网站:jquery库(已经知道的就可以跳过(⌒_⌒;))应该是完全免费的一个前端网站,很良心。
开始正题
在jquery库中您可以搜索“验证码”,您会惊喜的发现,有人已经帮你写好了常用的验证码功能(验证码直通车)。如果您只是需要一种或两种验证码的实现功能,到这里就可以结束了;您只需要下载这个网址中的验证码,通过更改代码来完成您自己的需求就可以了,修改他的代码也不是很难。
我的验证码
第一种
图片验证,简单来说是给出一张图片写出图片中的内容或者计算内容;这是最基础的一种验证码。
啥啥的,都是假的,会canvas就行了;不会就去现场学一下两分钟的事情。之后就发挥自己的想象力,创造就完事了(嘿嘿嘿)。
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>验证码</title>
</head>
<body>
<canvas id="verify" width="150" height="50"></canvas>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var ctx = getCanvas("verify");
var width = getCanvasWidth("verify");
var height = getCanvasHeight("verify");
function getCanvas(canvas_Id){
return document.getElementById(canvas_Id).getContext("2d");
}
function getCanvasWidth(canvas_Id){
return $("#" + canvas_Id).width();
}
function getCanvasHeight(canvas_Id){
return $("#" + canvas_Id).height();
}
/**
* description:初始化画布
* canvas_Id:画布的ID
* bgColor:画布的背景颜色
*/
function init_Canvas(canvas_Id,bgColor){
ctx.fillStyle = bgColor;
ctx.fillRect(0,0,width,height);
}
/**
* description:产生min--max之间的整数
* */
function RandomNUM(min,max){
return parseInt(Math.random()*(max-min)+min);
}
function RandomColor(){
var r = RandomNUM(0,255);
var g = RandomNUM(0,255);
var b = RandomNUM(0,255);
return `rgb(${r},${g},${b})`;
}
/**
* description:画干扰线
* num:干扰线的根数
* */
function drawLine(num) {
for(var i = 0; i < num; i++) {
ctx.beginPath();
ctx.moveTo(RandomNUM(0,width),RandomNUM(0,height));
ctx.lineTo(RandomNUM(0,width),RandomNUM(0,height));
ctx.strokeStyle = RandomColor();
ctx.closePath();
ctx.stroke();
}
}
/**
* description:产生随机字符
* num:随机字符的个数
* result:返回随机生成的字符串
* */
function RandomString(num){
var pool="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";
var result = "";
for(var i=0;i<num;i++){
var c=pool[RandomNUM(0,pool.length)];//随机的字
result += c;
var fontSize=RandomNUM(18,40);//字体的大小
var deg=RandomNUM(-30,30);//字体的旋转角度
ctx.font=fontSize+'px Simhei';
ctx.textBaseline="top";
ctx.fillStyle="#FFF";
ctx.save();
ctx.translate(30*i+15,15);
ctx.rotate(deg*Math.PI/180);
ctx.fillText(c,0,0);
ctx.restore();
}
return result;
}
init_Canvas("verify","#123");
drawLine(5);
RandomString(4);
</script>
</body>
</html>
算术的那种就靠各位发挥吧。(斜眼笑)
第二种
滑动验证,简单来说是通过滑动滑块来完成验证。
啰嗦一下,ヾ(๑╹◡╹)ノ",滑块的样式要是巴拉巴拉才能实现滑动,不会的话还是度娘一下吧
参考文章利用canvas实现滑动验证功能