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