JS实现登录验证码的生成(基础+进阶)

基础版本:生成的验证码只包含数字,用字符拼接组成验证码
body里设置一个存放验证码的盒子,取id为box,用于显示和点击切换验证码

  <div id="box"></div>

创建验证码函数,点击验证码可进行切换

function yzm() {
        var str = '';
        for (var i = 1; i <= 4; i++) { //四次的循环
            str += parseInt(Math.random() * 10); //拼接数字字符串,拼接四次
        }
        return str;
    }
    //设置标签元素,点击标签切换验证码。
    box.innerHTML = yzm();
    box.onclick = function() { //事件处理函数,点击box,函数就调用了
        box.innerHTML = yzm();
    };

进阶版本:
生成四位验证码,包含数字和大小写字母

 //验证码  防止高并发
        function getSecurityCode() {
            var arr = [];
            for (var i = 48; i < 123; i++) {
                //48-57   0-9
                //65-90   A-Z
                //97-122  a-z
                if (i > 57 && i < 65) {
                    i = 64;
                    continue; //跳过下面的语句 进行下次循环
                }
                if (i > 90 && i < 97) {
                    i = 96;
                    continue;
                }
                arr.push(String.fromCharCode(i));
            }
            arr.sort(function() {
                return Math.random() - 0.5;
            });
            arr.length = 4;
            return arr.join("");
        }
        var str = getSecurityCode();
        prompt("请输入验证码", str)
        alert(str);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liuwenjie_

感谢打赏,问题留言~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值