你好，可以使用canvas编写出验证码效果，你可以参考
<!DOCTYPE HTML>
<html lang="en">
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style>
@charset "utf-8"
/* CSS Document */
body {
background: url(images/img10.jpg) no-repeat fixed
}
body,form,ul,ol,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,table,fieldset,hr,div {
margin: 0
padding: 0
}
body,input,select,textarea {
color: #000
font: 12px/1.8 "微软雅黑", Arial, Helvetica, sans-serif
}
img {
border: 0
vertical-align: middle
}
table {
width: 100%
border: 0
border-collapse: collapse
border-spacing: 0
}
ul,ol,li {
list-style-type: none
}
a {
color: #000
outline: none
text-decoration: none
}
a:hover {
text-decoration: underline
}
.contain {
width: 500px
margin: 0 auto
padding-top: 200px
}
</style>
<body>
<div class="contain">
<canvas id="myCanvas" height="300px" width="500px">your browser does not support the canvas tag </canvas>
<br /> <input type="text">
<button onClick="pass()">提交</button>
</div>
</body>
<script type="text/javascript">
var canvas = $("#myCanvas").get(0)
var _canvas = $("#myCanvas").get(0).getContext("2d")
var return_str = ""
var _ifstart = false
var _B_x = 0
var _B_y = 0
function can_click() {
}
function pass() {
var _val = $(":text:eq(0)").val()
if (_val == return_str) {
alert('您通过验证了！')
} else {
alert('您输入的验证码不正确！')
}
}
function start() {
try {
function drawscreen() {
_canvas.fillStyle = "#ffffaa"
_canvas.fillRect(0, 0, 500, 300)
_canvas.strokeStyle = "#000"
_canvas.strokeRect(5, 5, 490, 290)
}
function write_text(_str) {
_canvas.fillStyle = "#000000"
_canvas.font = "20px _sans"
_canvas.textBaseline = "top"
_canvas.fillText(_str, 195, 80)
}
function getabc() {
var _str = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,0,1,2,3,4,5,6,7,8,9"
var _str_array = _str.split(",")
return_str = ""
for (i = 0 i < 4 i++) {
var _rnd = Math.floor(Math.random() * _str_array.length)
return_str += _str_array[_rnd]
}
}
drawscreen()
getabc()
write_text(return_str)
} catch (e) {
alert(e)
}
}
$(document).ready(function(e) {
start()
})
</script>
</html>
希望可以帮助到你
在html中的文本框中加入验证码，可以通过以下代码实现：验证码通过GD生成PNG图片，并把$randval随机数字赋给$_SESSION['login_check_num']，在通过用户输入的$_POST进行比较，来判断是否正确。达到需要实现的功能，需要修改php.ini文件，使php支持GD库。 <?php//调用此页面，如果下面的式子成立，则生成验证码图片if($_GET["action"]=="verifycode"){rand_create()}//验证码图片生成function rand_create(){//通知浏览器将要输出PNG图片Header("Content-type: image/PNG")//准备好随机数发生器种子srand((double)microtime()*1000000)//准备图片的相关参数$im = imagecreate(62,20)$black = ImageColorAllocate($im, 0,0,0)//RGB黑色标识符 $white = ImageColorAllocate($im, 255,255,255)//RGB白色标识符 $gray = ImageColorAllocate($im, 200,200,200)//RGB灰色标识符 //开始作图imagefill($im,0,0,$gray)while(($randval=rand()%100000)<10000){$_SESSION["login_check_num"] = $randval//将四位整数验证码绘入图片imagestring($im, 5, 10, 3, $randval, $black)}//加入干扰象素for($i=0$i<200$i++){$randcolor =ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255))imagesetpixel($im, rand()%70 , rand()%30 , $randcolor)}//输出验证图片ImagePNG($im)<HTML><HEAD>
<TITLE>生成验证码</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function createCode(len)
{
var seed = new Array(
'abcdefghijklmnopqrstuvwxyz',
'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
'0123456789'
) //创建需要的数据数组
var idx,i
var result = '' //返回的结果变量
for (i=0i<leni++) //根据指定的长度
{
idx = Math.floor(Math.random()*3)//获得随机数据的整数部分-获取一个随机整数
result += seed[idx].substr(Math.floor(Math.random()*(seed[idx].length)), 1)//根据随机数获取数据中一个值
}
return result//返回随机结果
}
function test() {
var inputRandom=document.getElementById("inputRandom").value
var autoRandom=document.getElementById("autoRandom").innerHTML
if(inputRandom==autoRandom) {
alert("通过验证")
} else {
alert("没有通过验证")
}
}
</SCRIPT>
</HEAD>
<BODY>
验证码长度：
<SELECT id="sel">
<option value=1>1</option>
<option value=3>3</option>
<option value=5>5</option>
<option value=7 selected>7</option>
<option value=9>9</option>
</SELECT>
<BR>
<table>
<tr>
<td>验证码：</td>
<td><input type="text" id="inputRandom"></td>
<td><label id="autoRandom" value=""></label><INPUT TYPE="button" VALUE="获取验证码" ONCLICK="autoRandom.innerHTML=createCode(sel.value)"></td>
<td><input type="button" value="验证" onclick="test()"></td>
</tr>
</table>
<script type="text/javascript">
window.onload()=autoRandom.innerHTML=createCode(sel.value)
</script>
</BODY>
</HTML>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）