• JavaScript 编写随机四位数验证码(大小写字母和数字)


    1、JavaScript编写随机四位数验证码,用到的知识点为:

      a、Math对象的随机数:Math.random()

           b、Math对象的取整    :Math.floor()

      c、处理所需要的下标个数,结合以上两个Math对象。

    2、首先,来做几道简单的结果输出。

      a、Math.random()*100;

      b、Math.floor(Math.random()*100);

      c、Math.floor(Math.random()*100)%16;

      相信大家前两道题很容易就能够做对。结果分别是 a、0-100之间的随机浮点数。b、0-100之间的随机整数。

      那么第三道题无非就是 0-100之间的随机整数对16取余数,将会是一个什么区间呢 ?  

      在这里我告诉大家一个方法:

        任何数字对某一个数字取余数,那么最小的余数应该是 0 本身,那么最大的余数应该是什么呢? 答案当然是比他小 1 。 

        以这道题为例:100%16 最大的余数当然是 15 , 因为余数如果是16 的话他将被整除,最终余数为0. 

    3、说了这么多小问题,基础题,我们学会了这些能够做什么呢?

      本篇文章为大家编写 一个 随机验证码(4位数 大小写字母 数字组成)实现 随机变换颜色, 随机变换字号大小 , 随机抽取字母数字。

    /*
       1、随机的颜色,随机的字号,随机的字母数字。
            颜色由:0-9的数字,a-f的字母组成。
            字号:以html标记font的属性1-7组成。
            字母数字:小写26个字母,大写26个字母,0-9 的 数字组成。 
       2、创建三个数组,数组元素为以上三组。
       3、4位数验证码,需要使用循环遍历,条件是4次。每次在这个循环中,我需要产生随机颜色数组长度的下标、随机字号数组颜色的下标、随机抽取字母大小写,数字样本数组的下标。
       4、拼接字符串,每次生成一个font元素, color="颜色数组[随机下标]" size = "字号数组[随机下标]"   内容为:字母数字样本[随机下标]
       5、输出随机字符串
    */
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>4位字母验证码</title>
        <script type="text/javascript">
        function checkCodeofRandom(){
            // 所需随机抽取的样本数组 
            var nums=new Array("q","w","e","r","t","y","u","i","o","p","a","s","d","f","g","h","j","k","l","z","x","c","v","b","n","m","A","W","E","R","T","Y","U","I","O","P","A","S","D","F","G","H","J","K","L","Z","X","C","V","B","N","M","0","1","2","3","4","5","6","7","8","9");
            // 初始化 拼接字符串
            var str="";
            //颜色需要的数组元素
            var nums1=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
            var n1="";
            //字号需要的数组元素
            var nums2=new Array("1","2","3","4","5","6","7");
            var n2;
            for(i=0;i<4;i++){
            //遍历拼接颜色色值 eg 000000
                for(var j=0;j<6;j++){
                    var k=Math.floor(Math.random()*100)%16;
                      n1=n1+nums1[k];
                }
                //每次生成一个随机的字号
                var o=Math.floor(Math.random()*100)%8;
                       n2=nums2[o];       
                //每次生成一个0 - 61 之间的 number 作为随机获取验证码的下标
                var p=Math.floor(Math.random()*1000)%62;
                //拼接验证码  随机颜色 随机字号 随机抽取大小写字母和数字
                str+="<font color='#"+n1+"' size='"+n2+"'>"+nums[p]+"</font>"
            }
            document.getElementById("checkCode").innerHTML = str;
        }
          
        </script>
    </head>
    <body>
        <div id = 'checkCode' style="100px; float: left; "></div>
        <button id = "btn" onclick="checkCodeofRandom()">获取验证码</button>
    </body>
    </html>
    本博客是博主自己研究,编写的随机验证码,请深入理解其随机思想。在此基础上可以衍生多位数验证码,或者组成元素更多的验证码。
    希望广大编程爱好者的意见或者建议,转载需要注明博主地址,谢谢。
  • 相关阅读:
    centos安装rabbitMQ
    迁移文件时发现SyntaxError: Generator expression must be parenthesized
    2020.9.14、星期一
    自己的github 项目怎么构建
    卡尔曼滤波
    模型转换
    vs2019 安装ncnn
    VS2019配置opencv 4.4
    others
    小脚本
  • 原文地址:https://www.cnblogs.com/wangweizhang/p/8328161.html
Copyright © 2020-2023  润新知