验证码案例及优化

常见的验证码：数字+字母组合的{4/6位}、拼图、数学运算、按顺序点击、选图片、旋转图片的...

var box=document.querySelector('.box');
//生成四位验证码，并且放入到box盒子当中
function createCode(){
   //area索引范围：0~61  获取某个字符：area.charAt([索引])
   var area='0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM',
       code='';//创建一个空变量来放取到的字符
   //循环四次，每一次都创建一个0~61之间的随机索引，根据索引取出指定位置的字符，拼接在一起，就是想要的验证码
   for(var i=0;i<4;i++){
       var ran=Math.round(Math.random()*(61-0)+0);
       char=area.charAt(ran);//通过索引拿到对应的字符
       code+=char;//字符串拼接
   }
   //把生成的验证码放置在盒子中
   box.innerHTML=code;
}

//加载页面的时候就执行一次
createCode();
//点击盒子的时候，重新执行方法
box.onclick=createCode;//不写小括号是把方法给到点击事件 

验证码优化：不重复的验证码

//不重复的验证码：每一次取出的字符，不一定要拼接进去，只有之前已经拼接好的验证码中，没有这个字符，才拼接
//不确定循环的次数，只有当验证码已经拼成四位以后，才会结束
var box=document.querySelector('.box');
function createCode(){
   var area='0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM',
       code='';//已经拼好的字符串
    while(code.length<4){
        var ran=Math.round(Math.random()*(61-0)+0);
        char=area.charAt(ran);//新取出来的字符
      // 验证当前获取的字符，在已有的验证码中是否存在，如果存在就不累加了「忽略大小写」
        if(code.toLowerCase().indexOf(char.toLowerCase())===-1){
            code+=char;
        } 
    }
   box.innerHTML=code;
}
createCode();
box.onclick=createCode;