JavaScript编写随机四位数验证码（⼤⼩写字母和数字）
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 // 初始化拼接字符串
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>"
}
}
</script>
</head>
<body>
<div id = 'checkCode' ></div>
<button id = "btn" onclick="checkCodeofRandom()">获取验证码</button>
</body>
</html>
本博客是博主⾃⼰研究，编写的随机验证码，请深⼊理解其随机思想。在此基础上可以衍⽣多位数验证码，或者组成元素更多的验证码。
希望⼴⼤编程爱好者的意见或者建议，转载需要注明博主地址，谢谢。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。