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