我们在实际开发中,会用到短信验证码以及网页验证码,相对来说网页验证码的成本比较低,安全系数也还可以,接下来我们就来做一个网页端的验证码,直接上代码:
首先来说一下文件目录结构:
|----------phpyanzheng 项目文件夹
|----fonttype 文件夹放字体文件,字体文件一般以 .ttf和.otf结尾
|----1.php 里面放php语言代码
|----index.html 里面放网页布局
1.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<?php
header( 'content-type:image/jpeg' ); //定义一下代码以jpeg文件来解析
$width = 120; //定义了图像的宽
$height = 40; //定义了图像的高
$element = array ( 'q' , 'w' , 'e' , 'r' , 't' , 'y' , 'u' , 'i' , 'o' , 'p' , 'l' , 'k' , 'j' , 'h' , 'g' , 'f' , 'd' , 's' , 'a' , 'z' , 'x' ,
'c' , 'v' , 'b' , 'n' , 'm' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '0' , 'Q' , 'W' , 'E' , 'R' , 'T' , 'Y' , 'U' , 'I' , 'O' , 'P' , 'A'
, 'S' , 'D' , 'F' , 'G' , 'H' , 'J' , 'K' , 'L' , 'M' , 'N' , 'B' , 'V' , 'C' , 'X' , 'Z' ); //定义一个显示文本的数组
$string = '' ;
for ( $i =0; $i <4; $i ++){
$string .= $element [rand(0, count ( $element )-1)]; //随机产生四个文本目标
}
$img = imagecreatetruecolor( $width , $height ); //设置验证区宽高
$colorBg = imagecolorallocate( $img ,rand(185,255),rand(185,255),rand(185,255)); //产生200-255的随机数
$colorBorder = imagecolorallocate( $img ,rand(50,100),rand(50,100),rand(50,100)); //边框颜色
$colorDian = imagecolorallocate( $img ,rand(0,100),rand(0,100),rand(0,100)); //背景小点的颜色
$colorLine = imagecolorallocate( $img ,rand(0,255),rand(0,255),rand(0,255));
$colorString = imagecolorallocate( $img ,rand(20,80),rand(20,80),rand(20,80));
imagefill( $img , 0, 0, $colorBg ); //设置位置和背景颜色
imagerectangle( $img ,0,0, $width -1, $height -1, $colorBorder ); //画一个边框
for ( $i =0; $i <200; $i ++){ //循环出200个干扰点
imagesetpixel( $img , rand(0, $width -1), rand(0, $height -1), $colorDian );
}
for ( $i =0; $i < round (5); $i ++){ //循环出5条干扰线
imageline( $img ,rand(0, $width /2),rand(0, $height /2),rand( $width /2, $width ),rand( $height /2, $height ), $colorLine );
}
//imagestring($img, 4, 0, 0,'a5dg', $colorString);
imagettftext( $img ,25,rand(5, 15),rand(0,40),39, $colorString , 'fonttype/PrincetownStd.otf' , $string );
// 图像名称 字体大小 倾斜角度 起始位置X轴 起始位置Y轴 颜色 字体位置 显示的内容
imagejpeg( $img ); //输出图像
?>
|
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title >孙三峰--验证码</ title >
< script type = "text/javascript" src = "js/jquery-1.1.0.js" ></ script >
</ head >
< body >
<!--注意:原文中对应的ip地址是自己电脑端ip,如果不能正常运行,请修改ip-->
< p >
< label class = "lbright" >验证码:</ label >
< span >
< input type = "text" name = "validcode" style = "width:70px; vertical-align:middle;" id = "validcode" />
< img id = "codePic" src = "http://192.168.1.113:8601/PHP/phpyanzheng/1.php" width = "120" height = "40" />
</ span >
< span id = "codePic" onclick = "getPic();" >看不清楚,换一张</ span > <!---->
</ p >
</ body >
< script type = "text/javascript" >
function getPic(){
$("#codePic").attr("src","http://192.168.1.113:8601/PHP/phpyanzheng/1.php?flag="+Math.random()); <!--局部刷新-->
};
</ script >
</ html >
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。