用layUI的伙伴一定发现了:
layUI的验证码是长死图! ! !
没错,是死图~ ~ ~ ~
什么倒霉框架。
下面代码是帆布验证码及校验。稍微修改及可用。
我嵌套到项目里的效果如图:
& lt; !DOCTYPE html>
& lt; html>
& lt; !——头比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>图片登录验证& lt;/title>
& lt;元name=颁秩尽蹦谌?皐ebkit”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘,chrome=1”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最大范围=1”比;
& lt; style>
身体{保证金:10 px;}
.demo-carousel{高度:200 px;行高:200 px;text-align:中心;}
.code {
宽度:400 px;
保证金:0汽车;
}
.input-val {
宽度:295 px;
背景:# ffffff;
高度:2.8快速眼动;
填充:0 2%;
border - radius: 5 px;
边界:没有;
边界:1 px固体rgba (0, 0, 0, 0。2);
字体大小:1.0625快速眼动;
}
#帆布{
浮:正确;
显示:inline-block;
边界:1 px固体# ccc;
border - radius: 5 px;
光标:指针;
}
.btn {
宽度:100 px;
高度:40像素;
背景:# f1f1f1;
边界:1 px固体# ccc;
border - radius: 5 px;
保证金:20 px汽车0;
显示:块;
字体大小:1.2快速眼动;
颜色:# e22e1c;
光标:指针;
}
* {
保证金:0;
填充:0;
box-sizing: border-box;
}
& lt;/style>
& lt;/head>
& lt;脚本src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "祝辞& lt;/script>
& lt;身体cz-shortcut-listen=" true "类=發ayui-layout-body”比;
& lt; div类=發ayui-layer-move”比;
& lt; div类=按搿北?
& lt;输入类型="文本" value="占位符=扒胧淙胙橹ぢ?不区分大小写)”class=癷nput-val”比;
& lt;帆布id=盎肌笨矶?" 100 "高度=?3”祝辞& lt;/canvas>
& lt;按钮类=" btn "祝辞提交& lt;/button>
& lt;/div>
& lt;/div>
& lt;/body>
& lt; script>
$(函数(){
var show_num=[];
画(show_num);
$(" #画布”)。(“点击”,函数(){
画(show_num);
}）
$ (“.btn”)。(“点击”,函数(){
var val=$ (“.input-val”) .val () .toLowerCase ();
var num=show_num.join (" ");
如果(val==") {
警报(“请输入验证码!”);
}else if (val==num) {
alert('提交成功!”);
$ (" .input-val ") .val (");
画(show_num);
其他}{
alert('验证码错误!请重新输入!”);
$ (" .input-val ") .val (");
画(show_num);
}
}）
}）
函数绘制(show_num) {
var canvas_width=$(“#画布”).width ();
var canvas_height=$(“#画布”).height ();
画布var=. getelementbyid(“画布”);//获取到画布的对象,演员
var=canvas.getContext上下文(2 d);//获取到画布画图的环境,演员表演的舞台
画布。宽度=canvas_width;
画布。身高=canvas_height;
var范围=" A, B, C, E, F, G, H, J, K, L, M, N, P, Q, R, S, T, W, X, Y, Z, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0”;
var aCode=sCode.split (", ");
var aLength=aCode.length;//获取到数组的长度
(var=0;我& lt;=3;我+ +){
var j=Math.floor (math . random () * aLength);//获取到随机的索引值
var度=Math . random() * 30 *数学。π/180;//产生0 ~ 30之间的随机弧度
var txt=aCode [j];//得到随机的一个内容
show_num[我]=txt.toLowerCase ();
var x=10 + i * 20;//文字在画布上的x坐标
var y=20 + math . random() * 8;//文字在画布上的y坐标
上下文。字体="大胆23 px微软雅黑”;
上下文。翻译(x, y);
context.rotate(度);
上下文。fillStyle=randomColor ();
上下文。fillText (txt, 0, 0);
context.rotate(度);
上下文。翻译(- x - y);
}
(var=0;我& lt;=5;我+ +){//验证码上显示线条
上下文。strokeStyle=randomColor ();
context.beginPath ();
context.moveTo (math . random () * canvas_width, math . random () * canvas_height);
context.lineTo (math . random () * canvas_width, math . random () * canvas_height);
context.stroke ();
}
(var=0;我& lt;=30;我+ +){//验证码上显示小点
上下文。strokeStyle=randomColor ();
context.beginPath ();
var x=math . random () * canvas_width;
var y=math . random () * canvas_height;
上下文。函数(x, y);
上下文。画线(x + 1, + 1);
context.stroke ();
}
}
函数randomColor(){//得到随机的颜色值
var r=Math.floor (math . random () * 256);
var g=Math.floor (math . random () * 256);
var b=Math.floor (math . random () * 256);
返回“rgb (“+ r +”、“+ g +”、“+ b +”)”;
}
& lt;/script>
& lt;/html>
