本篇文章给大家带来的内容是关于原生js实现验证码的生成方法(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
.block{
width: 150px;
height: 50px;
line-height: 50px;
border: 1px solid silver;
background:url("./img/bg1.png")no-repeat;
background-size:120% ;
text-align: center;
}
.btn{
color: green;
background-color: #d6ffe1;
cursor: pointer;
}
.yztxt{
width: 150px;
height: 20px;
border: 1px solid silver;
}
看不清....
验证
var b=document.getElementsByClassName("block")[0];
var btn=document.getElementsByClassName("btn")[0];
var s=document.getElementsByClassName("txt");
var yztxt=document.getElementsByClassName("yztxt")[0];
var yz=document.getElementsByClassName("yz")[0];
var numrous=""; //定义一个空数组 用来存放生成的验证码
yz.οnclick=function(){ //给验证按钮一个方法 判断验证码是否输入正确
if(yztxt.value.length<=0){
alert("请输入验证码:")
}
else if(yztxt.value== numrous.toLowerCase()){
alert("验证成功!");
}
else{
alert("验证失败!");
nrandom();//验证失败重新调随机产生验证码的函数
}
};
btn.οnclick=function(){//当鼠标点击看不清时,切换验证码
nrandom();
};
nrandom();
function nrandom(){
numrous="";//在产生下一组验证码,清空上次验证码
b.innerHTML="";//清空文本框中验证码
for(var i=0;i<6;i++){
var num=Math.random()*100; //产生数字,大小写字母的总概率100
if(num<=50){
//数字产生的概率50%
var n=Math.floor(Math.random()*10);
numrous+=n;//将随机产生的数字放在字符串numrous
b.innerHTML+=""+n+"";//将随机产生的数字在文本框中显示
}
else if(num>=50&&num<=80){
//产生小写字母的概率为30%
var n =String.fromCharCode(Math.floor(Math.random()*25+97));
numrous+=n;
b.innerHTML+=""+n+"";
}
else{
//产生大写字母的概率20%
var n =String.fromCharCode(Math.floor(Math.random()*25+65));
numrous+=n;
b.innerHTML+=""+n+"";
}
}
stylezi();//调用验证码字体样式
}
//下面分别设置了验证码的颜色,大小,粗细,距左的距离以及倾斜角度
function stylezi(){
for(var i=0;i< s.length;i++){
s[i].style.color="rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
s[i].style.fontSize=(Math.random()*20+15)+"px";
s[i].style.fontWeight=Math.random()*300+200;
s[i].style.left=(Math.random()*20-10)+"px";
s[i].style.transform="rotatez("+Math.random()*90-45+"deg)";
}
}
相关推荐: