验证码的生成（验证码：数字+字母的随机组合）

时间 2020-12-27

1.首先说说验证码怎么实现数字+字母的随机组合

思路：用一个数组存放0-9，a-z，A-Z；然后生成四个随机数（范围是0-61），当4个随机数都不同时在0-9，或者10-61之间，

然后就用四个随机数做数组的下标，取出值；因为4个随机数都不同时在0-9（说明有一些在0-9，对应的值是数字，有一些在10-61，对应的值是字母）或者不同时在10-61，这样取出的值就是数字+字母组合了，结合下图理解！

对应实现js代码为：
function chcode(){
 var characters=["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","w","x","y","z",
 "A","B","C","D","E","F","G","H","I","J","K","L","M","N","P","O","Q","R","S","T","U","V","W","X","Y","Z"];
 var T=true;
 while(T){
 A=characters[Math.floor(Math.random()*62)];
 B=characters[Math.floor(Math.random()*62)];
 C=characters[Math.floor(Math.random()*62)];
 D=characters[Math.floor(Math.random()*62)];
 if((A<'9'&&B<'9'&&C<'9'&&D<'9')||(A>'9'&&B>'9'&&C>'9'&&D>'9')){
 T=true;
 }
 else {T=false;}
 }
 document.getElementById("code1").innerHTML=A;//获取id为code1组件，把显示的内容替换为A
 document.getElementById("code2").innerHTML=B;
 document.getElementById("code3").innerHTML=C;
 document.getElementById("code4").innerHTML=D;

}

2.说说怎么生成图片，具体的思路是利用span标签，然后设置一张背景图片，然后在利用适当的调整字符的大小

对应的代码如下：

//设置背景图片，设置触发事件

<a href="javascript:;"> //设为空链接

//设置第一个字符的颜色，字体大小
 //设置第二个字符的颜色，字体大小
 //设置第三个字符的颜色，字体大小
 ///设置第四个字符的颜色，字体大小

</a>

就到这里了，欢迎留言