Html code:
Copy codeThe Code is as follows:
<! 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> simple verification code </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"> Verification Code: </div> </td>
<Td> <input id = "yzm" type = "text" name = "yzm" size = "8" onBlur = "javascript: chkyzm (form)" onMouseOver = "this. style. backgroundColor = '# ffff' "onMouseOut =" this. style. backgroundColor = '# e8f4ff' "/> </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"> invisible </a> </td>
<Td width = "150" align = "center"> <div id = "yzm1"> <font color = "#999999"> enter the Verification Code </font> </div> </td>
</Tr>
</Table>
</Form>
</Body>
</Html>
JS Code:
Copy codeThe Code is as follows:
Function chkyzm (form) {// verify the verification code
If (form. yzm. value = ""){
Yzm1.innerHTML = "<font color = # FF0000> × the Verification Code cannot be blank </font> ";
} Else if (form. yzm. value! = Form. yzm2.value ){
Yzm1.innerHTML = "<font color = # FF0000> × Incorrect verification code </font> ";
} Else {
Yzm1.innerHTML = "<font color = green> √ The verification code is entered correctly </font> ";
}
}
Function yzm () {// generate the verification code
Var num1 = Math. round (Math. random () * 1000000); // randomly zoomed out
Var num = num1.toString (). substr (); // returns a four-digit integer.
Var yzm2 = document. getElementById ("yzm2 ");
Document. write (" ");
Yzm2.value = num;
}
Function code () {// reset the verification code
Var num1 = Math. round (Math. random () * 1000000 );
Var num = num1.toString (). substr (0, 4 );
Var yzm2 = document. getElementById ("yzm2 ");
Document. codeimg. src = "yzm. php? Num = "+ num;
Yzm2.value = num;
}
Yzm. php code:
Copy codeThe Code is as follows:
<? Php
Header ("Content-type: image/png ");
$ Im = imagecreate (); // create a canvas
$ Black = imagecolorallocate ($ im, 0, 0); // defines the background
$ White = imagecolorallocate ($ im, 255,255,255); // defines the background
$ Gray = imagecolorallocate ($ im, 200,200,200); // defines the background
Imagefill ($ im, 0, 0, $ gray); // fill color
For ($ I = 0; $ I <4; $ I ++) {// defines a four-digit random number.
$ Str = mt_rand (); // defines the Y coordinate of the random character location
$ Size = mt_rand (6, 9); // defines the font of random characters
$ Authnum = substr ($ _ GET [num], $ I, 1); // obtain the Verification Code passed in the hyperlink
Imagestring ($ im, $ size, (3 + $ I * 15), $ str, $ authnum, imagecolorallocate ($ im, rand (0,250), rand (0,250 ), rand (0,250); // The Blur degree of the rand (0,500) Number
} // Horizontal output string
For ($ I = 0; $ I <200; $ I ++) {// execute the for loop to add a fuzzy background for the verification code
$ Randcolor = imagecolorallocate ($ im, rand (0,255), rand (0,255), rand (0,255); // create a background
Imagesetpixel ($ im, rand () % 70, rand () % 30, $ randcolor); // draw a single element
}
Imagepng ($ im); // generate a png Image
Imagedestroy ($ im); // destroy the image
?>
Note: PHP requires configuration to execute related methods.
Running effect:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
