验证码

点击按钮获取验证码，文本框失去焦点判断验证码是否输入正确。

html：

<input type="text" name="" id="text" />
<div id="VerCode"></div>
<button type="button" id="ver">获取验证码</button>

css:

#text {
	width: 200px;
	height: 25px;
	float: left;
}

#VerCode {
	width: 100px;
	height: 25px;
	background-color: #10C593;
	float: left;
}

js:

var txt = document.getElementById("text");
var VerCode = document.getElementById("VerCode");
var ver = document.getElementById("ver");

ver.onclick = function() {
	// 获取字母,数字
	var xA = String.fromCharCode(parseInt(Math.random() * (90 - 65 + 1) + 65));
	var xa = String.fromCharCode(parseInt(Math.random() * (122 - 97 + 1) + 97));
	var x = parseInt(Math.random() * 10);

	// 把字母数字添加到数组中
	var arr = [xA, xa, x, x];
	//定义空数组，用来存放随机排序数据
	var arr2 = [];
	// VerCode.innerHTML=arr;

	for (var i = 0; i < 4; i++) {
		var n = parseInt(Math.random() * 4);
		arr2[i] = arr[n];
	}
	var str = arr2.join("");
	VerCode.innerHTML = str;
}

//文本框失去焦点事件
txt.onblur = function() {
	//获取文本框内容
	var txtStr = txt.value.toLowerCase();
	// console.log(typeof txtVa);

	//获取div内容
	var verStr = VerCode.innerHTML.toLowerCase();
	// console.log(verStr);

	//验证判断
	if (txtStr == verStr) {
		VerCode.innerHTML = "验证成功";
	} else {
		VerCode.innerHTML = "验证失败";
	}
}