Day24 - 小功能系列:验证码效果

版权声明：啥是版权，感觉都是侵权必究。我也会究的。 https://blog.csdn.net/Scan_13286/article/details/84679232

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())，从之前定义的数组中取元素。

---

然后做第二个，验证输入内容与验证码一致。

$("#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();
	})
})

---

更完~还是写前端比较有成就感，毕竟看得到效果。