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. Property 'XXX' not found on type java.lang.String解决方案

    一,标签指令错误. 原指令标签: <%@ taglib prefix="c" uri="http://j ava.sun.com/jstl/core" % ...

  2. [Node.jS]shelljs

    shelljs : https://www.npmjs.org/package/shelljs 要给可以替代Unix下shell脚本的库. require('shelljs/global'); if ...

  3. java 在web应用中获取本地目录和服务器上的目录不一致的问题

    先来讲讲我所遇到的问题.最近有个新的项目添加新的功能. 修改之后部署到服务器上面发现取到classpath目录跑到别的地方去了.在本地测试却正常. 当时毛的着火了.硬是想不懂什么问题. 终于发现了这个 ...

  4. echarts和highcharts

    highcharts是基于svg技术的 echarts基于canvas 后者可以在浏览器中实现3D图形  链接  ,这种效果highcharts是完全不可能做得到的.

  5. springMVC从前端接受boolean类型的属性失败的问题

    springMVC从前端接收到的实体又一个boolean类型的属性,发现不管前端怎么操作,后台接收到的值都是false. 问题出现原因: eclipse在给实体属性生成getter和setter的时候 ...

  6. 学习ssm

    1.安装配置maven (1)在http://maven.apache.org/download.cgi下载apach-maven-3.5.4-bin.zip (2)将apach-maven-3.5. ...

  7. ERROR:105: Unable to locate a modulefile for 'xxx'

    查看可用的 module:module avail 将xxx替换为屏幕输出中已有的模块.

  8. 可视化开发_AppInventor2似乎被抛弃了

    工具 blockly google,mixly,scratch,app inventor2 的分别 可视化编程,青雀,来自 白鹭 没源码 如果想二次开发呢,初版拖拽控件生成,后期维护的时候找程序员加功 ...

  9. IIS 配置asp.net 环境

    打开Internet信息服务管理器,在左侧点击“应用程序池”,下面将以asp.net v4.0 程序池为例 在中间的“ASP.NET V4.0”上右键“高级选项”,展开“进程模型”,找“标识”选项,然 ...

  10. Mybatis学习笔记5 - 参数处理

    1.单个参数:mybatis不会做特殊处理,#{参数名}:取出参数值. 2.多个参数:mybatis会做特殊处理. 多个参数会被封装成 一个map, key:param1...paramN,或者参数的 ...