登录页面-----验证码的随机获取

获取验证码

第一种方法：

还能简单的获取到数字0-9的随机数，字母部分不能实现，并且此方法是利用了4个div，代码繁琐

html部分：

<div class="num" id="yanzhengma" onclick="turn()">
        <div id="one" ></div>
        <div id="two" ></div>
        <div id="three" ></div>
        <div id="four" ></div>
    </div> 

js部分

//页面刷新时，也可以获取到验证码
        window.onload = function(){
            turn()
        }           
       
         function turn(){
        //验证码获取
        function RandomNum(Min,Max){
            var a=Max-Min;
            var b=Math.random();
            var num=Math.round(Min+(a*b))//范围=初始值+（随机数*差值）
            return num;
        }
            //验证码刷新
        var numList=document.getElementsByClassName("num")[0].children
        for(var i=0; i<numList.length;i++){
            numList[i].innerHTML=RandomNum(Min=0,Max=9);
        }

       }

第二种方法：

此方法可以获取到数字跟字母，利用数组的for循环减少html的代码量

html部分：

验证码:<input type="text" placeholder="请输入验证码" id="yzm">
<input type="button" class="num" id="checkCode" onclick="createCode()" name="yanzhengma"/>

提示：第一个input标签是要输入的验证码；第二个input标签是获取的随机验证码。

js部分

//数组
    //产生验证码   
  window.onload = function() {
    createCode();
    // cancel().stop
}

function createCode() {
    code = "";
    var codeLength = 4; //验证码的长度   
    var checkCode = document.getElementById("checkCode");
    var random = new Array(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'); //随机数   
    for (var i = 0; i < codeLength; i++) { //循环操作   
        var charIndex = Math.floor(Math.random() * 36); //取得随机数的索引   
        code += random[charIndex]; //根据索引取得随机数加到code上   
    }
    checkCode.value = code; //把code值赋给验证码   
}