JS实现数字字母混合验证码(数字+大写字母+小写字母)

我之前写了一篇《JS实现随机验证码》，可以产生随机数字、随机颜色、随机位置，但只能产生数字验证码，今天在此基础上进行改进，使之可以随机大写字母、小写字母、数字三种类型。

思路

我们使用Math.random()获得随机的数字、小写字母、大写字母的ASCII码，然后将其转换为字母或数字。

实现

某个范围的随机数

function getRandomInt(min, max){return min + parseInt(Math.random() * (max - min + 1));
}

验证码的随机

数字0 ~ 9的ASCII码为48 ~ 57；
小写字母的ASCII码为65 ~ 90；
大写字母的ASCII码为97 ~ 122；
我们获得随机范围是1 ~ 3的整数来代表这三个范围，然后声明min 和 max来存放这三个范围的最大值和最小值。
然后通过String.fromCharCode()将获取到的随机的ASCII码转换为数字或字母。
具体代码如下：

function getRandomText(){var min, max;switch (parseInt(getRandomInt(1, 3))) {case 1:min = 48;max = 57;break;case 2:min = 65;max = 90;break;case 3:default:min = 97,max = 122;break;}return String.fromCharCode(getRandomInt(min, max));}

颜色的随机

颜色的随机我们还是使用上篇文章中的方法，来获得随机的十六进制颜色的字符串：

function getRandomColor() {var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";var colorArray = colorValue.split(",");var color = "#";for (var i = 0; i < 6; i++) {color += colorArray[Math.floor(Math.random() * 16)];}return color;
}

位置的随机

我们根据canvas画布的大小来随机产生0~50的随机高度

function getRandomHeight(){return parseInt(Math.random() * 50);
}

验证码的绘制

我们依旧是使用canvas画板来绘制验证码，我们分四次获取随机的字母或数字，每次获取前随机一个颜色，并设置字体的随机高度。

function getVerification() {var ctx = document.getElementById("canvas").getContext("2d");ctx.clearRect(0,0, 400, 400);ctx.font = "128px bold 黑体";ctx.textBaseline = "top";for(var i = 0; i < 4; i++){ctx.fillStyle = getRandomColor();ctx.fillText(getRandomText(), 60 * i, getRandomHeight());}
}

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2</title>
</head><body><h1>数字字母混合验证码(数字+大写字母+小写字母)</h1><canvas id="canvas" style="border: 1px solid red; width: 80px; height: 40px;"></canvas><button onclick="getVerification()">看不清</button><script>function getRandomColor() {var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";var colorArray = colorValue.split(",");var color = "#";for (var i = 0; i < 6; i++) {color += colorArray[Math.floor(Math.random() * 16)];}return color;}function getRandomHeight(){return parseInt(Math.random() * 50); }function getRandomInt(min, max){return min + parseInt(Math.random() * (max - min + 1));}function getRandomText(){var min, max;switch (parseInt(getRandomInt(1, 3))) {case 1:min = 48;max = 57;break;case 2:min = 65;max = 90;break;case 3:default:min = 97,max = 122;break;}return String.fromCharCode(getRandomInt(min, max));}function getVerification() {var ctx = document.getElementById("canvas").getContext("2d");ctx.clearRect(0,0, 400, 400);ctx.font = "128px bold 黑体";ctx.textBaseline = "top";for(var i = 0; i < 4; i++){ctx.fillStyle = getRandomColor();ctx.fillText(getRandomText(), 60 * i, getRandomHeight());}}getVerification();</script>
</body></html>

JS实现数字字母混合验证码(数字+大写字母+小写字母)相关推荐

React =＞ js+canvas四位数字字母混合验证码(数字+大写字母+小写字母)
文章目录此为最终实现效果! 开始进行编写 html添加canvas标签 ref讲解页面初始化生成验证码设置生成随机数函数 randomNum() 设置干扰线函数drawLine() 绘制路径 ( ...
用机器学习sklearn+opencv-python过古诗文网4位数字+字母混合验证码
目录获取验证码图片用opencv-python处理图片制作训练数据集训练模型识别验证码编写古诗文网的登录爬虫代码总结与提高源码下载在本节我们将使用sklearn和opencv-pyt ...
（汇编）输出数字、大写、小写字母
问题:内存自source开始有20个数字.大写字母.小写字母的混合串(比如:1234567890abceFGHIJ)编程将其中的数字符号挑选出来存储到dst开始的内存中,做一个菜单,选1,2,3分别输 ...
编写程序，如果输入的是大写字母，则输出对应的小写字母，如果输入的是小写字母，则输出对应的大写字母；如果输入的是数字，原样输出；按回车结束
直接上代码: ;如果输入的是大写字母,则输出对应的小写字母, ;如果输入的是小写字母,则输出对应的大写字母: ;如果输入的是数字,原样输出:按回车结束 ;A = 41h Z = 5ah ;我们假设输入 ...
Python编写程序，实现对输入字符串的大小写字母翻转（即大写变小写、小写变大写）操作
该程序通过两种方式来实现字母的翻转,一种是通过普通方式,另一种是通过自定义函数的方式来实现,该程序还对用户的输入可靠性进行判断,用户输入的必须是字母,如果输入数字,python程序会提示用户输入错误, ...
Python程序输入一个字符串并查找总数的大写和小写字母
Given a string str1 and we have to count the total numbers of uppercase and lowercase letters. 给定字符串 ...
[转载] Python程序输入一个字符串并查找总数的大写和小写字母
参考链接: Python程序可大写字符串中每个单词的第一个和最后一个字符 Given a string str1 and we have to count the total numbers of u ...
输入字符串，统计其中大写，小写字母，数字，其他字符。
import java.util.*; public class QQQ { public static void main(String[] args) { Scanner ...
python生成随机的大写字母_Python — 随机生成10个大写、小写字母、特殊字符 string模块...
import string string.ascii_letters #py3 这个函数把大小写都包括进去了 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJK ...