JavaScript 编写随机四位数验证码(大小写字母和数字)

2022-12-01,,,,

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 编写随机四位数验证码(大小写字母和数字)的相关教程结束。

《JavaScript 编写随机四位数验证码(大小写字母和数字).doc》

下载本文的Word格式文档,以方便收藏与打印。