搜尋
首頁後端開發php教程PHP+javascript製作帶有提示的驗證碼源碼分享

html程式碼:

<!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>
</head>
<script language="javascript" src="js/checked.js"></script>
<body>
<form id="register" name="register" method="post" >
<table align="center">
    <tr>
      <td ><div align="right">验证码:</div></td>
      <td ><input id="yzm" type="text" name="yzm" size="8" onBlur="javascript:chkyzm(form)" onMouseOver="this.style.backgroundColor=&#39;#ffffff&#39;" onMouseOut="this.style.backgroundColor=&#39;#e8f4ff&#39;"/></td><td>
        <input id="yzm2" type="hidden" value="" /></td>
      <td align="center" valign="middle"><script>yzm()</script></td>
      <td ><a href="javascript:code()" style="text-decoration:none">看不清</a></td>
      <td width="150"  align="center"><div id="yzm1"><font color="#999999">请输入验证码</font></div></td>
    </tr>  
</table> 
  </form>
</body>
</html>

JS程式碼:

function chkyzm(form){     //对验证码进行验证
 if(form.yzm.value==""){
  yzm1.innerHTML="<font color=#FF0000>×验证码不能为空</font>"; 
 }else if(form.yzm.value!=form.yzm2.value){
  yzm1.innerHTML="<font color=#FF0000>×验证码输入错误</font>";
 }else{
  yzm1.innerHTML="<font color=green>√验证码输入正确</font>";
 }
}
function yzm(){      //生成验证码
 var num1=Math.round(Math.random()*1000000);//随机小数放大
 var num=num1.toString().substr(0,4);//取4位整数
 var yzm2=document.getElementById("yzm2");
 document.write("<img  src="/static/imghwm/default1.png"  data-src="yzm.php?num="  class="lazy"  name=codeimg src=yzm.php?num="+num+"&#39; alt="PHP+javascript製作帶有提示的驗證碼源碼分享" >");
 yzm2.value=num;
}
function code(){      //重置验证码
 var num1=Math.round(Math.random()*1000000);
 var num=num1.toString().substr(0,4);
 var yzm2=document.getElementById("yzm2");
 document.codeimg.+num;
 yzm2.value=num;
}

yzm.php程式碼:

<?php
header("Content-type: image/png");
$im=imagecreate(66,22);       //创建画布
$black=imagecolorallocate($im,0,0,0);   //定义背景
$white=imagecolorallocate($im,255,255,255);  //定义背景
$gray=imagecolorallocate($im,200,200,200);  //定义背景
imagefill($im,0,0,$gray);      //填充颜色
for($i=0;$i<4;$i++){ //定义4位随机数
 $str=mt_rand(1,5);  //定义随机字符所在位置的的Y坐标
 $size=mt_rand(6,9); //定义随机字符的字体
 $authnum=substr($_GET[num],$i,1);  //获取超级链接中传递的验证码
 imagestring($im,$size,(3+$i*15),$str,$authnum,imagecolorallocate($im,rand(0,250),rand(0,250),rand(0,250)));//rand(0,500)数字的模糊程度
}       //水平输出字符串
for($i=0;$i<200;$i++){  //执行for循环,为验证码添加模糊背景
  $randcolor=imagecolorallocate($im,rand(0,255),rand(0,255),rand(0,255)); //创建背景
  imagesetpixel($im,rand()%70,rand()%30,$randcolor);  //绘制单一元素
}
imagepng($im);    //生成png图像
imagedestroy($im);   //销毁图像
?>

注意:PHP需要設定才能執行相關方法。

更多PHP+javascript製作帶提示的驗證碼源碼分享相關文章請關注PHP中文網!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
使用PHP發送電子郵件的最佳方法是什麼?使用PHP發送電子郵件的最佳方法是什麼?May 08, 2025 am 12:21 AM

ThebestapproachforsendingemailsinPHPisusingthePHPMailerlibraryduetoitsreliability,featurerichness,andeaseofuse.PHPMailersupportsSMTP,providesdetailederrorhandling,allowssendingHTMLandplaintextemails,supportsattachments,andenhancessecurity.Foroptimalu

PHP中依賴注入的最佳實踐PHP中依賴注入的最佳實踐May 08, 2025 am 12:21 AM

使用依賴注入(DI)的原因是它促進了代碼的松耦合、可測試性和可維護性。 1)使用構造函數注入依賴,2)避免使用服務定位器,3)利用依賴注入容器管理依賴,4)通過注入依賴提高測試性,5)避免過度注入依賴,6)考慮DI對性能的影響。

PHP性能調整技巧和技巧PHP性能調整技巧和技巧May 08, 2025 am 12:20 AM

phpperformancetuningiscialbecapeitenhancesspeedandeffice,whatevitalforwebapplications.1)cachingwithapcureduccureducesdatabaseloadprovesrovessetimes.2)優化

PHP電子郵件安全性:發送電子郵件的最佳實踐PHP電子郵件安全性:發送電子郵件的最佳實踐May 08, 2025 am 12:16 AM

ThebestpracticesforsendingemailssecurelyinPHPinclude:1)UsingsecureconfigurationswithSMTPandSTARTTLSencryption,2)Validatingandsanitizinginputstopreventinjectionattacks,3)EncryptingsensitivedatawithinemailsusingOpenSSL,4)Properlyhandlingemailheaderstoa

您如何優化PHP應用程序的性能?您如何優化PHP應用程序的性能?May 08, 2025 am 12:08 AM

TOOPTIMIZEPHPAPPLICITIONSFORPERSTORANCE,USECACHING,數據庫imization,opcodecaching和SererverConfiguration.1)InlumentCachingWithApcutCutoredSatfetchTimes.2)優化的atabasesbasesebasesebasesbasesbasesbaysbysbyIndexing,BeallancingAndWriteExing

PHP中的依賴注入是什麼?PHP中的依賴注入是什麼?May 07, 2025 pm 03:09 PM

依賴性注射inphpisadesignpatternthatenhancesFlexibility,可檢驗性和ManiaginabilybyByByByByByExternalDependencEctenceScoupling.itallowsforloosecoupling,EasiererTestingThroughMocking,andModularDesign,andModularDesign,butquirscarecarefulscarefullsstructoringDovairing voavoidOverOver-Inje

最佳PHP性能優化技術最佳PHP性能優化技術May 07, 2025 pm 03:05 PM

PHP性能優化可以通過以下步驟實現:1)在腳本頂部使用require_once或include_once減少文件加載次數;2)使用預處理語句和批處理減少數據庫查詢次數;3)配置OPcache進行opcode緩存;4)啟用並配置PHP-FPM優化進程管理;5)使用CDN分發靜態資源;6)使用Xdebug或Blackfire進行代碼性能分析;7)選擇高效的數據結構如數組;8)編寫模塊化代碼以優化執行。

PHP性能優化:使用OpCode緩存PHP性能優化:使用OpCode緩存May 07, 2025 pm 02:49 PM

opcodecachingsimplovesphperforvesphpermance bycachingCompiledCode,reducingServerLoadAndResponSetimes.1)itstorescompiledphpcodeinmemory,bypassingparsingparsingparsingandcompiling.2)useopcachebachebachebachebachebachebachebysettingparametersinphametersinphp.ini,likeememeryconmorysmorysmeryplement.33)

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。