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. visio 使用技巧汇总

    1.visio中图形旋转任意角度的方法 视图----任务窗格----大小与位置----角度 2.箭头形状 更多形状---流程图----箭头形状 3.汇制虚线框 从基本形状中拖出一个矩形,右击矩形,选择 ...

  2. hdu2795 Billboard（线段树）

    题意:h*w的木板,放进一些1*L的物品,求每次放空间能容纳且最上边的位子思路:每次找到最大值的位子,然后减去L线段树功能:query:区间求最大值的位子(直接把update的操作在query里做了) ...

  3. Windows 常见DOS命令

    1. 查看网络连接及路由状况 netstat -a                 查看开启了哪些端口,常用netstat -an netstat -n                  查看端口的网 ...

  4. 转 python 的常用函数replace, split(),enumerate() 函数

    1.execmd = "su - " + ou + " -c 'sqlplus / as sysdba << EOF\n " + execmd3 + ...

  5. Notepad++实用插件

    说明: Converter: 编码转换工具,ascii2hex,hex2ascii DoxyIt: 添加文件或者函数注释比较方便 DSpellCheck: 拼写检查 MIME Tools: 将Base ...

  6. kafka与zookeeper读写分析

    kafka的读写都通过leader完成,而zookeeper只有写要通过leader而读可以通过任意follower,我觉得造成这种差异的原因还是在于使用场景. kafka的设计目标是实现一个高吞吐的 ...

  7. 自动化构建工具maven

    Maven是目前最流行的自动化构建工具,对于生产环境下多框架.多模块整合开发有重要作用.Maven 是一款在大型项目开发过程中不可或缺的重要工具. 一.什么是构建? 构建并不是创建,创建一个工程并不等 ...

  8. java源文件组成部分

    class HelloWorld{ public static void main(String[ ] args) { System.out.print("HelloWorld!!!&quo ...

  9. 2019.03.21 读书笔记 ==与Equals

    首先得出一个结论:==是比较变量内存的数据,Equals是值比较.但是他们都能被重写,所以object又增加了一个RefrenceEquals不可被重写,只比较数据: [ReliabilityCont ...

  10. tencent intern learning

    gslb全局负载均衡   (负载均衡的问题就是某些session保存在某台服务器中,这个用户就只能用那台服务器服务了) jwt vs 传统cookies & session  (jwt类似于公 ...