生成六位驗(yàn)證碼.png

html布局：

   <div class="yz">
       <div class="yz_code"></div>
       <button class="btn" type="btn">換一張</button>
   </div>  

style樣式：

<style>  
    .yz{
        width: 60%;
        height: 50px;
        line-height: 50px;
        margin: 100px auto;
    }
    .yz_code{
        float: left;
        width: 140px;
        text-align: center;
        height: 100%;
        border: 1px solid #000;
        margin-right: 20px;
    }
    button{
        margin-top: 24px;
        font-size: 16px;
        border: none;
        background: transparent;
        border-bottom: 1px solid blue;
    }
</style>

js代碼
需要用到j(luò)avaScript的math對(duì)象，代碼如下：

// 生成兩個(gè)數(shù)之間的隨機(jī)數(shù)
    function rnd(start,end){
        return Math.floor(Math.random()*(end-start+1))+start;
    }

    var str ="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    
    // 生成6位數(shù)字驗(yàn)證碼
    function code(){
        var arr = [];
        for(var i = 0;i<6;i++){
            arr[i] = str.charAt(rnd(0,str.length-1));
        }
        // 將數(shù)組轉(zhuǎn)化為字符串
        var res = arr.join("")
        $('.yz_code').html(res);
    }
  // 首次進(jìn)入時(shí)展示的驗(yàn)證碼
    code();

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

另一種生成驗(yàn)證的方式：

    // 生成驗(yàn)證碼的第二種方法
     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碼，則增加一次循環(huán)
            len++;
        }
    }

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

不要忘記給我點(diǎn)贊奧~~~~

image.png