发一个兼容多种浏览器的验证码
时间:2008-09-25
来源:互联网
由于近日来开发博客,在做的过程中,也发现了一些不可忽视的问题。在做后台登录的时候,有一项是验证码功能,原本轻易地实现了,但后来才发现,在不同浏览器上不能兼容点击刷新功能。比如像:
<img src=\"verify_image.php\" alt=\"点此刷新验证码\" name=\"verify_code\" width=\"65\" height=\"20\" border=\"0\" id=\"verify_code\" onclick=\"document.getElementById('verify_code').src='verify_image.php?'+Math.random();\" style=\"cursor:pointer;\" />
不能在IE7和火狐上实现“点此刷新功能”
起初我也是使用这种方法,但不能兼容。于是便想到了另一个方法,并且成功了!非常的惊喜!现在与大家分享一下成果。
首先是验证码页:code.php
<?php
session_start();
Header(\"Content-type: image/GIF\");
$_SESSION['authnum']=\"\";
$im = imagecreate(50,20) or die(\"Cant's initialize new GD image stream!\"); //制定图片背景大小
$black = ImageColorAllocate($im, 0,0,0); //设定三种颜色
$green = ImageColorAllocate($im, 224,199,77);
$gray = ImageColorAllocate($im, 45,85,90);
//imagefill($im,0,0,$gray); //采用区域填充法,设定(0,0)
imagefill($im,0,0,$green);//ed
$ychar=\"0,1,2,3,4,5,6,7,8,9\";
$list=explode(\",\",$ychar);
for($i=0;$i<4;$i++){
$randnum=rand(0,9);
$authnum.=$list[$randnum];//
}
$_SESSION['authnum']=$authnum;
//int imagestring(resource image,int font,int x,int y,string s, int col)
imagestring($im, 5, 10, 3, $authnum, $black);
//用col颜色将字符串s画到image所代表的图像的x,y坐标处(图像的左上角为0,0)。
//如果 font 是 1,2,3,4 或 5,则使用内置字体
for($i=0;$i<200;$i++){ //加入干扰象素 {
$randcolor = ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255));
imagesetpixel($im, rand()%90 , rand()%30 , $randcolor);
imagesetpixel($im, rand()%90 , rand()%30 , $gray);
}
//echo $im;
ImageGIF($im);
ImageDestroy($im);
//die();
?>
此种页面取两个重命名。
实现页:login.php
<?php
session_start();
?>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<title>后台管理</title>
<link href=\"style/admin.css\" rel=\"stylesheet\" type=\"text/css\" />
<script language=\"JavaScript\">
<!--
var validate = true;
function get_code(){
if(validate==true){
document.getElementById(\"findcode\").src=\"code2.php\";
//alert(validate);
validate = false;
return false;
}else{
document.getElementById(\"findcode\").src=\"code.php\";
//alert(validate);
validate = true;
return false;
}
}
-->
</script>
</head>
<body>
<img src=\"code.php\" name=\"findcode\" width=\"43\" height=\"17\" border=\"0\" id=\"findcode\" style=\"cursor : pointer;\"/> <span style=\"color:green;\"><a href=\"javascript://\">看不清,换一个</a></span>
</body>
</html>
演示地址:http://www.fla8d.cn/pblog/demo/login.php
<img src=\"verify_image.php\" alt=\"点此刷新验证码\" name=\"verify_code\" width=\"65\" height=\"20\" border=\"0\" id=\"verify_code\" onclick=\"document.getElementById('verify_code').src='verify_image.php?'+Math.random();\" style=\"cursor:pointer;\" />
不能在IE7和火狐上实现“点此刷新功能”
起初我也是使用这种方法,但不能兼容。于是便想到了另一个方法,并且成功了!非常的惊喜!现在与大家分享一下成果。
首先是验证码页:code.php
<?php
session_start();
Header(\"Content-type: image/GIF\");
$_SESSION['authnum']=\"\";
$im = imagecreate(50,20) or die(\"Cant's initialize new GD image stream!\"); //制定图片背景大小
$black = ImageColorAllocate($im, 0,0,0); //设定三种颜色
$green = ImageColorAllocate($im, 224,199,77);
$gray = ImageColorAllocate($im, 45,85,90);
//imagefill($im,0,0,$gray); //采用区域填充法,设定(0,0)
imagefill($im,0,0,$green);//ed
$ychar=\"0,1,2,3,4,5,6,7,8,9\";
$list=explode(\",\",$ychar);
for($i=0;$i<4;$i++){
$randnum=rand(0,9);
$authnum.=$list[$randnum];//
}
$_SESSION['authnum']=$authnum;
//int imagestring(resource image,int font,int x,int y,string s, int col)
imagestring($im, 5, 10, 3, $authnum, $black);
//用col颜色将字符串s画到image所代表的图像的x,y坐标处(图像的左上角为0,0)。
//如果 font 是 1,2,3,4 或 5,则使用内置字体
for($i=0;$i<200;$i++){ //加入干扰象素 {
$randcolor = ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255));
imagesetpixel($im, rand()%90 , rand()%30 , $randcolor);
imagesetpixel($im, rand()%90 , rand()%30 , $gray);
}
//echo $im;
ImageGIF($im);
ImageDestroy($im);
//die();
?>
此种页面取两个重命名。
实现页:login.php
<?php
session_start();
?>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<title>后台管理</title>
<link href=\"style/admin.css\" rel=\"stylesheet\" type=\"text/css\" />
<script language=\"JavaScript\">
<!--
var validate = true;
function get_code(){
if(validate==true){
document.getElementById(\"findcode\").src=\"code2.php\";
//alert(validate);
validate = false;
return false;
}else{
document.getElementById(\"findcode\").src=\"code.php\";
//alert(validate);
validate = true;
return false;
}
}
-->
</script>
</head>
<body>
<img src=\"code.php\" name=\"findcode\" width=\"43\" height=\"17\" border=\"0\" id=\"findcode\" style=\"cursor : pointer;\"/> <span style=\"color:green;\"><a href=\"javascript://\">看不清,换一个</a></span>
</body>
</html>
演示地址:http://www.fla8d.cn/pblog/demo/login.php
作者: 水滴 发布时间: 2008-09-25
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28