我之前写了一篇《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>
