前端js+html实现验证码

生成六位验证码.png

html布局：

   

       

       换一张
   
  

style样式：

js代码
需要用到javaScript的math对象，代码如下：

// 生成两个数之间的随机数
    function rnd(start,end){
        return Math.floor(Math.random()*(end-start+1))+start;
    }

    var str ="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    
    // 生成6位数字验证码
    function code(){
        var arr = [];
        for(var i = 0;i<6;i++){
            arr[i] = str.charAt(rnd(0,str.length-1));
        }
        // 将数组转化为字符串
        var res = arr.join("")
        $('.yz_code').html(res);
    }
  // 首次进入时展示的验证码
    code();

    $('.btn').click(function(event) {
        code();
    });

另一种生成验证的方式：

    // 生成验证码的第二种方法
     var arr = [];
     var len = 6;
     for(var i = 0; i < len; i++){
        var num = rnd(48,122); // 58
        if ((num>=48&&num<=57)||(num>=65&&num<=90)||(num>=97&&num<=122)){
            arr[i] = String.fromCharCode(num);
        }else{
            // 如果不是有效ascii码，则增加一次循环
            len++;
        }
    }

    console.log(arr.join(""));

不要忘记给我点赞奥~~~~

image.png