若干位随机数字字母混合验证码

Posted 2021-11-30 tdtdttd

今天，遇到了一个随机验证码的问题，就顺便说一下这个验证码怎么搞

相信大家应该对随机数不陌生

就是Math里的方法

这里要用到一个知识点 就是利用ASCII码转字符 

先附上随机数代码

 function suiji (m,n){ var sj = parseInt(Math.random()*(n-m+1)+m); return sj; } 

这里是我封装的一个m-n之间的随机数

随机数有了 我们就要用到ASCII码  看图

看图 我们能知道 数字的范围是48-57 大写字母是65-90 小写字母是97-122

所以 我们可以总结出一个条件

 num>48&&num<=57 || num>65&&num<=90 || num>=97&&num<=122 

得出我们需要随机的范围

然后回用到一句代码  ASCII转字符

String.fromCharCode(num)

这样 我们就可以封装出一个方法了

function yz(){
    var a = "";
    for(i = 0;i < 6; i++){
        var num = suiji(48,122)
        if(num>48&&num<=57 || num>65&&num<=90 || num>=97&&num<=122){
            a += String.fromCharCode(num);
        }else{
            i--
        }
    }
    return a;
}

当然了  这还没完呢

html结构

<button class= "btn">换一个</button>
    <input type="text" name="" id="" placeholder="随机数">

javascript

var btn = document.querySelector(".btn")
    var txt = document.querySelector("input")
    btn.onclick = function(){
        var txtvalue = yz();
        txt.value = txtvalue;
    }

获取到元素  然后将随机的内容交给input就可以做到了 

如果要将随机数放到一个div或span 是  需要将value改成innerHTml

 

以下为效果图