代码详解—原生js写验证码1

在写验证码之前先明确自己想要实现什么功能，再一步步实现功能。

css代码： 

  #codei{
            width:150px;
            height: 35px;
            border: 1px solid silver;
            text-align: center;
        }

html代码：

<div>
    <input type="text" id="input"/>
    <input type="button" id="codei" onclick="createsuiji()"/>
    <input type="button" value="验证" onclick="valued()"/>
</div>

js代码：

 var code="";//定义一个空数组 用来存放生成的验证码
    function createsuiji(){//封装一个随机产生数组的函数
        code="";//在产生下一组验证码，清空验证码字符串
        var codelength=6;//验证码长度
        var checkeCode=document.getElementById("codei");//获取验证码框的的class标签
        //定义含有大小写，数字的数组 以供后面随机产生验证码
        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','W','U','V','Y','Z','W','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 index=Math.floor(Math.random()*62);//在62位数组元素中随机产生一位
            code+=random[index];//将6位拼接
        }
        checkeCode.value=code;//将产生的验证码显示在验证码显示框中
    }
    function valued(){//封装验证码是否正确的函数
        var inputCode=document.getElementById("input").value;
        if(inputCode.length<=0){
            alert("请输入验证码：")
        }
        else if(inputCode!=code){
            alert("错误");
            createsuiji();//验证失败重新调随机产生验证码的函数
            document.getElementById("input").value="";
        }
        else{
            alert("ok");
        }
    }