<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8">
 <title>This is a test!</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
 <form name="form">
  <input type="text" placeholder="賬號"/><br/>
  <input type="password" placeholder="密碼"/><br/>
  <input type="text" placeholder="驗證碼"/>
  <img id="verImg" src="libs/verification.php"/>
  <a href="#" class="change" onclick="changeVer()">點(diǎn)擊刷新</a><br/>
  <input type="submit" value="登錄"/>
 </form>
 <script type="text/javascript">
 //刷新驗證碼
 function changeVer(){
  document.getElementById("verImg").src="libs/verification.php?tmp="+Math.random();
 }
 </script>
</body>
</html>

php腳本文件驗證碼的代碼如下：

<?php
 
session_start();
//開啟session記錄驗證碼數(shù)據(jù)
 
vCode(4, 15);//設(shè)置驗證碼的字符個數(shù)和圖片基礎(chǔ)寬度
 
//vCode 字符數(shù)目，字體大小，圖片寬度、高度
function vCode($num = 4, $size = 20, $width = 0, $height = 0) {
 
 !$width && $width = $num * $size * 4 / 5 + 15;
 !$height && $height = $size + 10;
 
 //設(shè)置驗證碼字符集合
 $str = "23456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVW";
 //保存獲取的驗證碼
 $code = '';
 
 //隨機(jī)選取字符
 for ($i = 0; $i < $num; $i++) {
  $code .= $str[mt_rand(0, strlen($str)-1)];
 }
 
 //創(chuàng)建驗證碼畫布
 $im = imagecreatetruecolor($width, $height);
 
 //背景色
 $back_color = imagecolorallocate($im, mt_rand(0,100),mt_rand(0,100), mt_rand(0,100));
 
 //文本色
 $text_color = imagecolorallocate($im, mt_rand(100, 255), mt_rand(100, 255), mt_rand(100, 255));
 
 imagefilledrectangle($im, 0, 0, $width, $height, $back_color);
 
 
  // 畫干擾線
 for($i = 0;$i < 5;$i++) {
  $font_color = imagecolorallocate($im, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255));
  imagearc($im, mt_rand(- $width, $width), mt_rand(- $height, $height), mt_rand(30, $width * 2), mt_rand(20, $height * 2), mt_rand(0, 360), mt_rand(0, 360), $font_color);
 }
 
  // 畫干擾點(diǎn)
 for($i = 0;$i < 50;$i++) {
  $font_color = imagecolorallocate($im, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255));
  imagesetpixel($im, mt_rand(0, $width), mt_rand(0, $height), $font_color);
 }
 
 //隨機(jī)旋轉(zhuǎn)角度數(shù)組
 $array=array(5,4,3,2,1,0,-1,-2,-3,-4,-5);
 
  // 輸出驗證碼
 // imagefttext(image, size, angle, x, y, color, fontfile, text)
 @imagefttext($im, $size , array_rand($array), 12, $size + 6, $text_color, 'c:\WINDOWS\Fonts\simsun.ttc', $code);
 $_SESSION["VerifyCode"]=$code;
 //no-cache在每次請求時都會訪問服務(wù)器
 //max-age在請求1s后再次請求會再次訪問服務(wù)器，must-revalidate則第一發(fā)送請求會訪問服務(wù)器，之后不會再訪問服務(wù)器
 // header("Cache-Control: max-age=1, s-maxage=1, no-cache, must-revalidate");
 header("Cache-Control: no-cache");
 header("Content-type: image/png;charset=gb2312");
 //將圖片轉(zhuǎn)化為png格式
 imagepng($im);
 imagedestroy($im);
}
?>

效果圖：