模仿随机验证码-简单效果

Posted 2021-01-02 taohuaya

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模仿随机验证码-简单效果相关的知识，希望对你有一定的参考价值。

简单模仿随机验证码效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单随机验证码-含字母</title>
    <style type= text/css>
        #div1 {
            width: 100px;
            height: 50px;
            background: red;
            text-align: center;
            font-size: 30px;
            line-height: 50px;
            color: orange;
            cursor: pointer;
        }    
        
    </style>

    <script>
            /*
                随机纯数字的验证码
                随机0~9之间的随机数
                
                parseInt(Math.random() * 10);

                随机既有数字又有字母的验证码
                0-9
                a-z   97-122
                A-Z   65-90

                想个办法：随机0-99的整数
                    0-9 数字
                    65-90 转成大写字母
                    17-42 + 80 转成小写字母
             */
            //封装的有大小写字母和数字的函数
             function testCodeWithStr(n){//n为验证码的个数
                 var arr = [];//装随机数的数组
                for(var i = 0; i < n; i++){
                    var num = parseInt(Math.random() * 100);//取0--100之间的随机数
                    if(num >= 0 && num <= 9){
                        arr.push(num);//将元素插入到数组的最后
                    }else if(num >= 17 && num <= 42){//17-42 + 80 转成小写字母
                        var str = String.fromCharCode(num + 80);//转成小写字母
                        arr.push(str);//将转成的小写字母插入到数组最后
                    }else if(num >= 65 && num <= 90){
                        var str = String.fromCharCode(num);//转成大写字母
                        arr.push(str);//将转成的小写字母插入到数组最后
                    }else{//如果没有随机到数，然后就在从小随机一边
                        i--;
                    }
                }
                return arr.join(‘‘);

             }

/*            //封装随机函数(纯数字)
            function testCode(n){//n为验证码的个数
                var arr = [];//装随机数的数组
                for(var i = 0; i < n; i++){
                    var num = parseInt(Math.random() * 10);
                    arr.push(num);

                }
                return arr.join(‘‘);
            }
*/

            function btnClick(){
                var oDiv = document.getElementById("div1");
                oDiv.innerHTML = testCodeWithStr(5)//此处调用的是有字母和数字的函数
            }
    </script>

</head>
<body>
    <div id = "div1" onclick = "btnClick();">12345</div>
</body>
</html>

效果：

技术分享图片

以上是关于模仿随机验证码-简单效果的主要内容，如果未能解决你的问题，请参考以下文章