首页 > 其他 > 详细

实现带算术运算的验证码

时间:2019-09-03 12:08:53      阅读:196      评论:0      收藏:0      [点我收藏+]
思路:大多数网站中的算术验证码都是整数形式的,所以我们的运算公式是这样的
加数 + 加数,被减数 减数,被乘数 乘数 无非这3种公式。类似+-*】 B
所以第一步:我们要封装一个php函数是生成 类似+-*】 的验证码,第二步:因为我们需要获取用户输入的结果进行验证码判断是否输入正确,所以在我们生成验证码的同时要记录下运算结果到服务器中(此处存入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

实现带算术运算的验证码

原文:https://www.cnblogs.com/heimaguangzhou/p/11452040.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!