原生php验证码,原生js实现验证码的生成方法（完整代码）

本篇文章给大家带来的内容是关于原生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)";

}

}

相关推荐：