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="width:100px; float: left; "></div>

    <button id = "btn" onclick="checkCodeofRandom()">获取验证码</button>

</body>

</html>
本博客是博主自己研究，编写的随机验证码，请深入理解其随机思想。在此基础上可以衍生多位数验证码，或者组成元素更多的验证码。
希望广大编程爱好者的意见或者建议，转载需要注明博主地址，谢谢。

JavaScript 编写随机四位数验证码（大小写字母和数字）的更多相关文章

  1. 22、vue实现随机四位数验证码

    效果图: 1.新建生成验证码的组件Sidentify.vue(代码如下): <template> <div class="s-canvas"> <ca ...

  2. C# 随机四位数验证码

    string str ="abcdefghigklmnopqrstuvwxyzABCDEFJHIGKLMNOPQRSTUVWXYZ1234567890"; while(true){ ...

  3. c# 产生随机字符串，包括大小写字母和数字

    #region MyRegion //產生密碼 protected static string GetPwd() { return CreateRandomNum123(2) + CreateRand ...

  4. Java随机获取32位密码且必须包含大小写字母、数字和特殊字符，四种的任意三种

    Java随机获取32位密码且必须包含大小写字母.数字和特殊字符,四种的任意三种 Java随机获取32位密码且必须包含大小写字母.数字和特殊字符,四种的任意三种,代码如下: import java.ut ...

  5. 用MFC完成一个简单的猜数字游戏: 输入的四位数中，位置和数字都正确为A，数字相同而位置不同的为B。

    最近学习了MFC一些比较基础的知识,所以打算通过做一个简单的数字游戏来理解MFC的流程并进一步熟悉其操作. 在这里,我做了一个猜数字的小游戏.第一步当然是设计主界面,先给大家展示一下游戏界面: 主界面 ...

  6. iOS开发-通过正则表达式进行各种判断银行卡,车牌号,邮箱地址,QQ,身份证,全字母,仅输入字母或数字同时包含大小写字母和数字,仅能输入中文等

    /* *  验证银行卡号是否正确 *  车牌号验证 *  检验邮箱地址是否正确 *  手机号中间四位密文显示 *  判断QQ号是否正确(5-11位) *  判断身份证号是否正确(如末位为字母请用“x” ...

  7. Python 使用正则表达式验证密码必须包含大小写字母和数字

    校验密码是否合法的程序. 输入一个密码 1.长度5-10位 2.密码里面必须包含,大写字母.小写字母和数字 3.最多输入5次 ===================================== ...

  8. java正则表达式校验密码必须是包含大小写字母、数字、特殊符号的8位以上组合

    一.需求:密码必须是包含大写字母.小写字母.数字.特殊符号(不是字母,数字,下划线,汉字的字符)的8位以上组合 二.方案:利用正则表达式来校验 三.思路:排除法 1.排除大写字母.小写字母.数字.特殊 ...

  9. 载 js验证密码 必须由大小写字母、数字和特殊字符组成

    转自:https://blog.csdn.net/weixin_43824935/article/details/93601064 密码长度8-16位 必须由大写字母,小写字母,数字,特殊符号组成 正 ...

随机推荐

  1. window下安装git与git使用

    有的eclipse已经自带了Git了,就不用安装了.如果,想重新安装,可以先卸载GIT,卸载 不同eclipse卸载不一样: 1.在Eclipse中依次点击菜单"Help"-> ...

  2. python 对三维CT数据缩放

    项目需要对CT数据进行缩放,这里我存储CT数据的格式是numpy数组. 一共尝试了三种方法,分别是numpy.resize,cv2.resize,scipy.ndimage.interpolation ...

  3. Luogu P2107 小Z的AK计划 堆贪心

    好久不做这种题了... 存一下每个点的位置和时间,由于达到某个位置跟之前去哪里AK的无关,所以在时间超限后,可以用大根堆弹掉之前消耗时间最大的,来更新答案,相当于去掉之前花费最大的,直到时间不在超限. ...

  4. 洛谷U41492（树上启发式合并）

    提交通道 洛谷日报 考虑非\(O(n^2)\)的预处理.一遍dfs时,check某颜色有没有的数组何时清空很尴尬:得到某树答案后如果不清,则影响接下来兄弟树的搜索:如果清了,父亲节点又难以收集答案. ...

  5. hdu3038判断区间谎言（带权并查集）

    题目传送门 题目描述:给你n,m,n代表从1到n这么大的数组,m组v,u,val,代表v到u这个区间的总和是val,然后让你判断m组关系中有几组是错误的. 思路:带权并查集,这道题其实算是让我知道什么 ...

  6. dropzone手动上传

    html: <div class="field"> <div id="file" class="dropzone"> ...

  7. 基于Visual Studio .NET2015的单元测试 OpenCover

    https://www.cnblogs.com/XiaoRuLiang/p/10095723.html 基于Visual Studio .NET2015的单元测试 1.    在Visual Stud ...

  8. 关于let 和 var 的作用域问题

    直接来一个经典案例: // 1. 下面的结果是什么? 为什么? for (var i=0;i<5;i++){ setTimeout(function () { console.log(i) }, ...

  9. grunt 安装使用（一）

    grunt 依赖nodejs,所有在使用前确保你安装了nodejs,然后开始执行grunt命令. .安装node nodejs安装教程 安装完成后在命令行,执行命令: node  -v 出现版本信息, ...

  10. 015 3Sum 三个数的和为目标数字

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...