zoukankan      html  css  js  c++  java
  • 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>
    本博客是博主自己研究,编写的随机验证码,请深入理解其随机思想。在此基础上可以衍生多位数验证码,或者组成元素更多的验证码。
    希望广大编程爱好者的意见或者建议,转载需要注明博主地址,谢谢。
  • 相关阅读:
    Android 编程下 Eclipse 恢复被删除的文件
    Android 编程下背景图片适配工具类
    Android 编程下 Managing Your App's Memory
    Android 编程下代码之(QQ消息列表滑动删除)
    Android 编程下 Canvas and Drawables
    Android 编程下 AlarmManager
    Android 编程下去除 ListView 上下边界蓝色或黄色阴影
    Java 编程下字符串的 16 位、32位 MD5 加密
    C#枚举类型和int类型相互转换
    MVC和普通三层架构的区别
  • 原文地址:https://www.cnblogs.com/wangweizhang/p/8328161.html
Copyright © 2011-2022 走看看