demo 验证码
2017-10-20 本文已影响0人
AnnQi
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 52px;
border: 1px solid red;
font-size: 26px;
line-height: 52px;
text-align: center;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="text" id="txt" />
<button id="btn">看不清，更换一张</button>
<button id="qq">确定</button>
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
var qq = document.getElementById("qq");
var str;
function yzm(){
str = "";
var box = document.getElementById("box");
var arr = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","X","Y","Z",'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
for(var i=0;i<4;i++){
var num = parseInt(Math.random(arr)*52);
str += arr[num];
}
box.innerHTML = str;
}
yzm();
function qd(){
var txt = document.getElementById("txt");
if(txt.value.length<=0){
alert("请输入验证码");
}else if(txt.value.toUpperCase()!= str.toUpperCase()){
alert("验证码输入有误");
yzm();
}else{
alert("验证成功");
}
}
btn.onclick = function(){
yzm();
}
qq.onclick = function(){
qd();
}
</script>
</html>
