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. JScrollPane (滚动面板)使用心得

    注意:使用滚动面板时,必须指定内部组件是哪个组件 JScrollPane的两种使用方式:. 方式一: //直接在创建滚动面板对象时,就指定所要显示的组件 //本例中所要显示的是jPanel JPane ...

  2. spring boot 很好的文章

    http://blog.csdn.net/isea533/article/details/50278205

  3. window 系统 修改服务器远程登录端口

    window 系统 [ 默认3389远程端口 ] 快捷键:Ctrl+R  然后输入“regedit”,打开注册表 或者 单击左下角[开始]——[运行],然后在输入框输入 regedit,点击确定,打开 ...

  4. git学习--远程分支删除

    查看远程分支 git branch -r  使用下面两条命令来删除远程分支 git branch -r -d origin/branch-name git push origin :branch-na ...

  5. JQuery判断页面是否按下了Enter键

    $('#someTextBox').keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.whi ...

  6. day15 面向对象 成员

    成员 1. 变量 1.实例变量 格式: 变量.xxx=xx (称为实例变量,也叫属性,字段)给对象用的 2.类变量 类变量:直接写在类中的变量就是类变量,类变量一般用类名来访问 其实就是类中相同的属性 ...

  7. 单元测试mock框架——jmockit实战

    JMockit是google code上面的一个java单元测试mock项目,她很方便地让你对单元测试中的final类,静态方法,构造方法进行mock,功能强大.项目地址在:http://jmocki ...

  8. jquery插件分页

    收藏地址: http://www.jq22.com/yanshi5697

  9. inode与block知识总结

    inode概述:硬盘要分区,然后格式化,创建文件系统在每个Linux存储设备的分区被格式化为ext3文件系统后一般有两个部分:    第一部分Inode:存储这些数据的属性信息(大小,属主,归属的用户 ...

  10. js字符串与数字之间的比较

    //1.纯数字之间比较 console.log(1<3);//true //2.纯字符串比较,先转成ASCII码,按位依次比较 console.log("1"<&quo ...