jQuery加法验证码效果代码实例
本章节分享一段代码实例,它实现了简单的前端验证码效果。
此验证码采用加法计算的方式,代码例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> .code{ font-family:Arial; font-style:italic; color:Red; border:0; padding:2px 3px; letter-spacing:3px; font-weight:bolder; cursor:pointer; } .unchanged{ border:0; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script language="javascript" type="text/javascript"> var code; //在全局 定义验证码 var code2; //在全局 定义验证码 function createCode(){ code=""; var checkCode=document.getElementById("checkCode"); function RndNum(n){ var rnd=""; for(var i=0;i<n;i++){ rnd +=Math.floor(Math.random()*10); } return rnd; } var num = RndNum(2); var num2 = RndNum(2); code = num + "+" + num2 + "="; code2 = parseInt(num) + parseInt(num2) if(checkCode){ checkCode.className="code"; checkCode.value=code; } } $(document).ready(function (){ $("#txt").blur(function (){ var inputCode=$("#txt").val(); if(inputCode.length<=0){ alert("请输入验证码"); } else if(inputCode!=code2){ alert("验证码输入错误"); createCode(); //刷新验证码 } else{ alert("验证码正确"); } }); $("#checkCode").click(function(){ createCode(); }) createCode(); }) </script> </head> <body> <form action="#"> <input type="text" id="txt" /> <input type="text" readonly id="checkCode" class="unchanged"/> </form> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).var code,声明一个变量用来存储验证码字符串,比如"20+30="。
(2).var code2,声明一个变量用来存储验证码的计算结果。
(3).function createCode(){},此函数是实现验证码的核心部分。
(4).code="",赋值空字符串。
(5).var checkCode=document.getElementById("checkCode"),获取对应的元素对象。
(6).function RndNum(n){
var rnd="";
for(var i=0;i<n;i++){
rnd +=Math.floor(Math.random()*10);
}
return rnd;
},此方法可以生成一个两位数的数字。
(7).var num = RndNum(2)和var num2 = RndNum(2)分别生成一个两位数数字。
(8).code = num + "+" + num2 + "=",链接成字符串。
(9).code2 = parseInt(num) + parseInt(num2),计算出结果。
(10).if(checkCode){
checkCode.className="code";
checkCode.value=code;
},如果存在指定的元素,那么就设置它的样式类和给它赋值。
二.相关阅读:
(1).Math.floor()方法可以参阅javascript Math.floor()一章节。
(2).Math.random()方法可以参阅javascript Math.random()一章节。
(3).parseInt()方法可以参阅javascript parseInt()一章节。
(4).className属性可以参阅js className一章节。