简单验证码制作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>随机验证码简单制作</title>
        <style type="text/css">
            body{margin: 0;padding: 0;}
            .auth-code{
                display: inline-block;
                width: 100px;
                margin: 100px 0 0 100px;
                padding: 10px 16px 10px 10px;
                text-align: center;
                letter-spacing: 6px;
                background: #e3e3e3;
                cursor: pointer;
            }
            
            .auth-code+img{
                height: 24px;
                position: relative;
                right: 28px;
                top: 6px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <!-- 验证码展示 -->
        <div class="wrap"><div class="auth-code">E2F7</div><img src="images/reload.png" alt="reload"></div>
    </body>
    <script type="text/javascript">
        // 获取元素
        var authCode = document.querySelector('.auth-code');
        var reload = document.querySelector("img[alt=reload]");
        
        //62个英文字母大小写加0-9数字的字符串
        var theCodes = "abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ0123456789";
        
        // 通过随机索引连续四次获取随机验证码
        function getRanCodes(theCodes){
            // 创建一个空的字符串来接收得到的四位验证码
            var str = "";
            for (var i = 0; i < 4; i++) {
                // 通过字符串中的charAt()方法获取每一个字符
                str += theCodes.charAt(getRanIndex(0,62));
            }
            authCode.innerHTML = str;
        }
        
        // 获取两个数字之间的随机索引随机索引
         /*function getRanIndex(m,n){
            // 将传入的参数转换成数值类型
            var num1 = Number(m);
            var num2 = Number(n);
            
            // 判断转换后的参数是否是NaN
            if(isNaN(num1) || isNaN(num2)){
                // 返回索引0-61,向下取整
                return Math.floor(Math.random()*62);
            }else{
                // 如果不是NaN就根据m和n的大小返回m-n之间的随机索引
                return (m > n) ? Math.floor(Math.random()*(m-n)) + m : Math.floor(Math.random()*(n-m));
            }
        } */
        
        function getRanIndex(m,n){
            // 如果不是NaN就根据m和n的大小返回m-n之间的随机索引
            return (m > n) ? Math.floor(Math.random()*(m-n)) + m : Math.floor(Math.random()*(n-m));
        }
        
        // 调用函数刷新页面获取验证码
        getRanCodes(theCodes);
        
        // 点击验证码,刷新
    /*     authCode.onclick = function(){
            getRanCodes(theCodes);
        } */
        
        authCode.onclick = reload.onclick = function(){
            getRanCodes(theCodes);
        }
    </script>
</html>
posted @ 2019-02-03 20:19 乱了夏天蓝了海阅读(169) 评论(0) 收藏举报
刷新页面返回顶部
乱了夏天蓝了海

简单验证码制作

公告
