快捷導(dǎo)航

php實(shí)現(xiàn)網(wǎng)頁(yè)端驗(yàn)證碼功能

更新時(shí)間：2017年07月11日 17:15:24 作者：孫三峰

這篇文章主要為大家詳細(xì)介紹了php制作網(wǎng)頁(yè)端驗(yàn)證碼效果，運(yùn)用到短信驗(yàn)證碼以及網(wǎng)頁(yè)驗(yàn)證碼實(shí)踐中，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

我們?cè)趯?shí)際開(kāi)發(fā)中，會(huì)用到短信驗(yàn)證碼以及網(wǎng)頁(yè)驗(yàn)證碼，相對(duì)來(lái)說(shuō)網(wǎng)頁(yè)驗(yàn)證碼的成本比較低，安全系數(shù)也還可以，接下來(lái)我們就來(lái)做一個(gè)網(wǎng)頁(yè)端的驗(yàn)證碼，直接上代碼：

首先來(lái)說(shuō)一下文件目錄結(jié)構(gòu)：

　　　　|----------phpyanzheng 項(xiàng)目文件夾

　　　　　　|----fonttype 文件夾放字體文件，字體文件一般以　.ttf和.otf結(jié)尾

　　　　　　|----1.php 里面放php語(yǔ)言代碼

　　　　　　|----index.html 里面放網(wǎng)頁(yè)布局

1.php

<?php
  header('content-type:image/jpeg');//定義一下代碼以jpeg文件來(lái)解析
  $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');//定義一個(gè)顯示文本的數(shù)組
  $string = '';
  for($i=0;$i<4;$i++){
    $string.=$element[rand(0,count($element)-1)];//隨機(jī)產(chǎn)生四個(gè)文本目標(biāo)
  }
  $img = imagecreatetruecolor($width, $height);//設(shè)置驗(yàn)證區(qū)寬高
  $colorBg = imagecolorallocate($img,rand(185,255),rand(185,255),rand(185,255));//產(chǎn)生200-255的隨機(jī)數(shù)
  $colorBorder = imagecolorallocate($img,rand(50,100),rand(50,100),rand(50,100));//邊框顏色
  $colorDian = imagecolorallocate($img,rand(0,100),rand(0,100),rand(0,100));//背景小點(diǎn)的顏色
  $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);//設(shè)置位置和背景顏色
  imagerectangle($img,0,0,$width-1,$height-1,$colorBorder);//畫一個(gè)邊框
  for($i=0;$i<200;$i++){//循環(huán)出200個(gè)干擾點(diǎn)
    imagesetpixel($img, rand(0, $width-1), rand(0, $height-1), $colorDian);
  }
  for($i=0;$i<round(5);$i++){//循環(huán)出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軸 顏色 字體位置 顯示的內(nèi)容
  imagejpeg($img);//輸出圖像
?>

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>孫三峰--驗(yàn)證碼</title>
    <script type="text/javascript" src="js/jquery-1.1.0.js" ></script>
  </head>
  <body>
    <!--注意：原文中對(duì)應(yīng)的ip地址是自己電腦端ip，如果不能正常運(yùn)行，請(qǐng)修改ip-->
    <p>
      <label class="lbright">驗(yàn)證碼：</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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: