Day24 - 小功能系列:验证码效果
就是验证码。
先写前端布局。
HTML代码
<div>
<input id="code" type="text">
<span id="codediv" title="点击我切换验证码" class="codediv">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<br />
<input type="button" value="提交" id="btn">
</div>
首先简历一个大的div,在div中存放一个输入的表单空间,即
<input id="code" type="text">
其次还要存放一个验证码的区域,即<span id="codediv" title="点击我切换验证码" class="codediv"> </span>
最后还要存放一个提交按钮。
效果图:
刚写出来是没有字母的,以上是我做完之后的效果。
Css样式
<style>
.codediv span{
padding:0 2px;
display:inline-block;
}
</style>
padding:0 2px;
为了让字符之间有间距
display:inline-block;
为了让字符实现角度的旋转
Javascript代码
主要的功能实现就在这了。
首先先想有那些效果
1.导入jQuery文件。
2.点击验证码,要能够切换验证码。
3.点击“提交”,可以验证验证码。
先做第一个:点击验证码,要能够切换验证码。
功能细则:
点击验证码,随机切换验证码背景颜色,随机切换验证码内容,随机切换字体颜色,随机切换验证码转动角度。
var Code = new Array("Q","W","E","R","T","Y","U","I","O","P","A","S","D","F","G","H","J","K","L","Z","X","C","V","B","N","M",
"0","1","2","3","4","5","6","7","8","9");
var Color = new Array("#0CC","#3CC","#6CC","#9CC","#CCC","#FCC");
function change(){
for(var i=0;i<$("#codediv > span").length;i++){
$("#codediv").css({background:""+Color[Math.floor(Math.random()*6)]+""});
$("#codediv > span").eq(i).html(Code[Math.floor(Math.random()*36)]);
$("#codediv > span").eq(i).css({color:"rgb("+Math.floor(Math.random()*255)+","
+Math.floor(Math.random()*255)+","
+Math.floor(Math.random()*255)+")",
transform:"rotate("+Math.floor(Math.random()*90-45)+"deg)"});
}
}
这里将所有功能都封装成了change()方法,以便于二次调用。
创建两个数组,一个用于存放切换的验证码内容,即字母和数字。一个用于存放背景颜色。
用$("#codediv > span")
获取到codediv中所有的span标签,并用for循环遍历。
然后使用随机数Math.floor(Math.random())
,从之前定义的数组中取元素。扫描二维码关注公众号,回复: 5272804 查看本文章
然后做第二个,验证输入内容与验证码一致。
$("#btn").click(function(){
var code = $("#codediv > span").eq(0).html()+
$("#codediv > span").eq(1).html()+
$("#codediv > span").eq(2).html()+
$("#codediv > span").eq(3).html()+
$("#codediv > span").eq(4).html()+
$("#codediv > span").eq(5).html();
if($("#code").val() == code){
alert("验证码通过");
}else{
alert("验证码输入错误");
}
});
获取提交按钮,并添加点击事件;
然后将每一个span的内容拼起来,再赋值给code
之后判断输入框的值是否与code相等即可。
然后需要完善一下,点击验证码,需要切换验证码。
$("#codediv").click(function(){
change();
})
给放验证码的div添加点击,再次调用change()方法即可。
最后所有方法要放到加载方法中。
$(function(){
/*开局调用change()方法生成验证码*/
change();
/*提交比较*/
$("#btn").click(function(){
var code = $("#codediv > span").eq(0).html()+
$("#codediv > span").eq(1).html()+
$("#codediv > span").eq(2).html()+
$("#codediv > span").eq(3).html()+
$("#codediv > span").eq(4).html()+
$("#codediv > span").eq(5).html();
if($("#code").val() == code){
alert("验证码通过");
}else{
alert("验证码输入错误");
}
});
/*点击字体变色,切换文字*/
$("#codediv").click(function(){
change();
})
})
更完~还是写前端比较有成就感,毕竟看得到效果。