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一章节。