在写验证码之前先明确自己想要实现什么功能,再一步步实现功能。
css代码:
#codei{
width:150px;
height: 35px;
border: 1px solid silver;
text-align: center;
}
html代码:
<div>
<input type="text" id="input"/>
<input type="button" id="codei" onclick="createsuiji()"/>
<input type="button" value="验证" onclick="valued()"/>
</div>
js代码:
var code="";//定义一个空数组 用来存放生成的验证码
function createsuiji(){//封装一个随机产生数组的函数
code="";//在产生下一组验证码,清空验证码字符串
var codelength=6;//验证码长度
var checkeCode=document.getElementById("codei");//获取验证码框的的class标签
//定义含有大小写,数字的数组 以供后面随机产生验证码
var random=new Array (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','W','U','V','Y','Z','W','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<codelength;i++){//每次自动产生一位验证码
var index=Math.floor(Math.random()*62);//在62位数组元素中随机产生一位
code+=random[index];//将6位拼接
}
checkeCode.value=code;//将产生的验证码显示在验证码显示框中
}
function valued(){//封装验证码是否正确的函数
var inputCode=document.getElementById("input").value;
if(inputCode.length<=0){
alert("请输入验证码:")
}
else if(inputCode!=code){
alert("错误");
createsuiji();//验证失败重新调随机产生验证码的函数
document.getElementById("input").value="";
}
else{
alert("ok");
}
}