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

回复

我来回复
  • 暂无回复内容