思路：大多数网站中的算术验证码都是整数形式的，所以我们的运算公式是这样的
加数 +
加数，被减数
-
减数，被乘数
*
乘数 无非这
3
种公式。类似
A
【
+
、
-
、
*
】
B
所以第一步：我们要封装一个php
函数是生成 类似
A
【
+
、
-
、
*
】
B
的验证码，第二步：因为我们需要获取用户输入的结果进行验证码判断是否输入正确，所以在我们生成验证码的同时要记录下运算结果到服务器中（此处存入
session
），第三步用户提交验证码与我们存入session中的运算结果进行匹配验证。
核心PHP代码：
[PHP]
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
<?php
/**
* @param int $width 宽度,默认为100
* @param int $height 高度,默认为50
* @param int $fontSize 字体的大小 默认20
* @return 图片资源
*/
function
getCaptche(
$width
=120,
$height
=50,
$fontSize
=20){
// 开启session
session_start();
// 创建画布
$img
= imagecreatetruecolor(
$width
,
$height
);
// 分配颜色
$color
= imagecolorallocate(
$img
,255,255,255);
// 填充颜色
imagefill(
$img
,0,0,
$color
);
// 干扰点
for
(
$i
= 0;
$i
< 500;
$i
++){
$pixColor
= imagecolorallocate(
$img
,mt_rand(100,200),mt_rand(100,200),mt_rand(100,200));
imagesetpixel(
$img
,mt_rand(0,
$width
),mt_rand(0,
$height
),
$pixColor
);
}
// 干扰线
for
(
$i
= 0;
$i
< 4;
$i
++){
$lineColor
= imagecolorallocate(
$img
,mt_rand(0,120),mt_rand(0,120),mt_rand(0,120));
imageline(
$img
,mt_rand(0,
$width
),mt_rand(0,
$height
),mt_rand(0,
$width
),mt_rand(0,
$height
),
$lineColor
);
}
// 定义一个数组存放运算符号
$arr
= [
'+'
,
'-'
,
'*'
];
// 计算数组的长度
$len
=
count
(
$arr
);
// 定义一个1到20的数组
$num
= range(1,20);
$numLen
=
count
(
$num
);
// 定义一个空数组来存放随机取得的验证码
$code
= [];
for
(
$i
= 0;
$i
<
$len
;
$i
++) {
if
(
$i
== 1) {
$code
[] =
$arr
[mt_rand(0,
$len
-1)];
}
else
{
$code
[] =
$num
[mt_rand(0,
$numLen
-1)];
}
}
$str
= implode(
$code
);
// 将数组转为字符串
$textColor
= imagecolorallocate(
$img
,mt_rand(100,200),mt_rand(100,200),mt_rand(100,200));
$fontAngle
= 0;
$x
= (
$width
-
$fontSize
*3)/2;
$y
= (
$height
-
$fontSize
) / 2 +
$fontSize
;
// 字体路径
$font
=
'/img/inkfree.ttf'
;
imagettftext(
$img
,
$fontSize
,
$fontAngle
,
$x
,
$y
,
$textColor
,
$font
,
$str
);
$res
= getRes(
$code
);
// 将函数存放在session中
$_SESSION
[
'res'
] =
$res
;
// 输出图片
header(
"content-type:image/png"
);
imagepng(
$img
);
}
/**
* @param $arr 一个包含运算符号的数组
* @return 返回一个运算结果
*/
function
getRes(
$arr
) {
$res
= 0;
// 判断数组元素下标为1的运算符号是什么
switch
(
$arr
[1]){
case
'+'
:
$res
=
$arr
[0] +
$arr
[2];
break
;
case
'-'
:
$sum
=
$arr
[0] -
$arr
[2];
break
;
case
'*'
:
$res
=
$arr
[0] *
$arr
[2];
break
;
}
return
$res
;
}
$width
= 120;
$height
= 50;
$fontSize
= 20;
//调用函数
getCaptche(
$width
,
$height
,
$fontSize
);
|
核心模板代码：
[HTML]
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<
title
>带运算的验证码</
title
>
<
style
>
img {
position: relative;
top: 20px;
}
</
style
>
</
head
>
<
body
>
<
form
action
=
"index.php"
>
验证码 <
input
type
=
"text"
name
=
"captche"
>
<
img
src
=
"./captche.php"
alt
=
"点击刷新"
>
<
br
>
<
button
>提交</
button
>
</
form
>
</
body
>
</
html
>
<
script
>
// 实现点击图片刷新验证码
var img = document.querySelector("img");
img.onclick = function () {
this.src = this.src+"?m="+Math.random();
}
</
script
>
|
效果图如下：
<ignore_js_op>
更多技术资讯可关注：gzitcast