|
思路：大多数网站中的算术验证码都是整数形式的，所以我们的运算公式是这样的 加数 + 加数，被减数 - 减数，被乘数 * 乘数 无非这3种公式。类似A 【+、-、*】 B 所以第一步：我们要封装一个php函数是生成 类似A 【+、-、*】 B 的验证码，第二步：因为我们需要获取用户输入的结果进行验证码判断是否输入正确，所以在我们生成验证码的同时要记录下运算结果到服务器中（此处存入session），第三步用户提交验证码与我们存入session中的运算结果进行匹配验证。
核心PHP代码：
[PHP] 纯文本查看 复制代码 <?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] 纯文本查看 复制代码 <!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>
效果图如下：
|
收藏
淘帖
踩
