美文网首页
JS实现数字字母混合验证码(数字+大写字母+小写字母)

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

作者: 知名大学士 | 来源:发表于2020-03-03 22:59 被阅读0次

👉作者主页👈

我之前写了一篇《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实现数字字母混合验证码(数字+大写字母+小写字母)

    ?作者主页? 我之前写了一篇《JS实现随机验证码》,可以产生随机数字、随机颜色、随机位置,但只能产生数字验证码,今...

  • 验证密码等级

    数字、小写字母、大写字母、其他字符、长度

  • 四、String字符串

    1. 获取指定字符串中,大写字母、小写字母、数字的个数。思路:1.为了统计大写字母、小写字母、数字的个数。创建3个...

  • JS 随机生成字母数字组合(包含大写字母)

    JS 随机生成字母数字组合(包含大写字母)

  • 表单验证

    小写字母 大写字母 大小写字母 邮箱 手机号验证 判断是否是数字 6-10位字符 6-16位数字字母密码验证 限制...

  • 记录一下 PHP 正则校验密码

    要求:密码长度至少 6 位,必须包含有大写字母、小写字母、数字 校验方法:

  • string 模块

    1.1 所有的大小写字母 1.2 所有的小写字母 1.3 所有的大写字母 1.4 0-9的数字 1.5 所有的特殊字符

  • HTML基础-06-列表

    1. 有序列表 语法 type 值:不写默认数字。可写大写字母、小写字母、罗马数字大小写 示例 输出image.p...

  • String字符计算

    大小写转换 字母和数字在Unicode 表中是顺序排列的'0','1','2'......'9'大写字母和小写字母...

  • 验证码、水印、缩放

    随机生成验证码 1、验证码1、纯数字2、纯字母3、数字字母混合4、计算公式 3 + 5 =打乱字符串:str_s...

网友评论

      本文标题:JS实现数字字母混合验证码(数字+大写字母+小写字母)

      本文链接:https://www.haomeiwen.com/subject/qourlhtx.html