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. FileLoadException: 未能加载文件或程序集"aliyun-net-sdk-cf, Version=1.0.0.0,

    清理缓存解决 C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files C:\Windows\Microsoft. ...

  2. 使用Spring和JQuery实现视频文件的上传和播放

    Spring MVC可以很方便用户进行WEB应用的开发,实现Model.View和Controller的分离,再结合Spring boot可以很方便.轻量级部署WEB应用,这里为大家介绍如何使用Spr ...

  3. 练习五十三：for循环练习

    对100以内的两位数,请使用一个两重循环打印出所有十位数都比各位数字小的数,并统计个数 l = [] for i in range(1,9): for j in range(i): l.append( ...

  4. C++ vector类型要点总结（以及各种algorithm算法函数）

    概述 C++内置的数组支持容器的机制,但是它不支持容器抽象的语义.要解决此问题我们自己实现这样的类.在标准C++中,用容器向量(vector)实现. 容器向量也是一个类模板.vector是C++标准模 ...

  5. Selenium + Python操作IE 速度很慢的解决办法

    IEDriverServer 64位换成32位 https://docs.seleniumhq.org/download/

  6. SSM-@Transactional 注释不生效

    1.在applicationConext.xml 中配置事务注解驱动 <!-- 事务注解驱动 --> <tx:annotation-driven /> <!-- 配置事务 ...

  7. 位于XDB的服务器localhost要求用户名和密码，端口占用

    问题现象: 从MyEclipse启动部署在tomcat上的web程序后,出现如下问题: 然后访问tomcat主页(http://localhost:8080/),弹出如下对话框: 问题原因: 机器上安 ...

  8. 【client】与【offset】

    上面主要区分了[offset]和[client]开头的各个属性的意义,下面这张图是转载的,又加入了[scroll]开头的,和元素本身的[style] clientWidth   是对象看到的宽度(不含 ...

  9. [转]完美的背景图全屏css代码 – background-size:cover?

    写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...

  10. DevExtreme 搭建Node.js开发环境

    简介 DevExtreme is a component suite for creating highly responsive web applications for touch devices ...